:active

    Table of contents

    1. 1. Specifications
    2. 2. Browser compatibility

    « CSS « CSS Reference

    The :active pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. It is often used on <a> and <button> HTML elements.

    Note: on system with mice having several buttons, CSS 3 specifies that the :active pseudo-class must only apply to the primary button, typically the left-most button on mice for right-handed.

    Browser compatibility

    Browser Lowest Version
    Internet Explorer 4.0  (only for <a>)
    Firefox 1.0
    Opera 5.0  (only for <a>)
    7.0
    Safari 1.0

    Tags (4)

    Edit tags

    Attachments (0)

     

    Attach file

    Page last modified 10:45, 21 Sep 2011 by teoli

    :after | ::after - MDN

      :after | ::after

      « CSS « CSS Reference

      Summary

      :after creates a pseudo-element that is the last child of the element matched. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

      Firefox 3.5 note

      Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions. Note this is independent from the colon notation issue mentioned below.

      Syntax

      element:after  { style properties }  /* CSS2 syntax */
      
      element::after { style properties }  /* CSS3 syntax */

      The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

      Note:  Microsoft Internet Explorer 8 supports the :after notation only.

      Examples

      .boringtext:after {
         content:    " Thank you for reading all this!"; 
         font-size:  small; 
         color:      red;
         background: gray; 
      }

      Browser compatibility

      Browser Lowest Version Support of
      Internet Explorer 8.0 :after
      Firefox (Gecko) 1.0 (1.0) :after
      1.0 (1.5) :after | ::after
      Opera 4.0 :after
      7.0 :after | ::after
      Safari (WebKit) 1.0 (85) :after | ::after

      See Also

      :before, content

      Tags (3)

      Edit tags

      Attachments (0)

       

      Attach file

      Page last modified 12:36, 8 Apr 2011 by Spirit55555

      animation-delay - MDN

        animation-delay

        « CSS « CSS Reference

        DRAFT
        This page is not complete.

        Summary

        The animation-delay property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.

        A value of 0 (the default) indicates that the animation should begin as soon as it's applied. Otherwise, the value specifies an offset from the moment the animation is applied to the element; animation will begin that amount of time after being applied.

        Specifying a negative value for the animation delay causes the animation to begin executing immediately. However, it will appear to have begun executing partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.

        If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.

        It is often convenient to use the shorthand property animation to set all animation properties at once.

        Syntax

        animation-delay: <time> [, <time>]*
        

        Values

        <time>
        The time offset from the time at which the animation is applied to the element at which the animation should begin. This may be specified in either seconds (by specifying "s" as the unit) or milliseconds (by specifying "ms" as the unit). If you don't specify a unit, seconds are assumed.

        Examples

        See CSS animations for examples.

        Browser compatibility

        • Desktop
        • Mobile

        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
        Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
        Basic support ? ? ? ? ?

        Tags (6)

        Edit tags

        Attachments (0)

         

        Attach file

        Page last modified 12:03, 25 Oct 2011 by teoli

        animation-direction - MDN

          animation-direction

          « CSS « CSS Reference

          This is an experimental feature
          Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

          Summary

          The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.

          It is often convenient to use the shorthand property animation to set all animation properties at once.

          Syntax

          animation-direction: normal | alternate [, normal | alternate]*
          

          Values

          normal
          The animation should play forward each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. This is the default animation direction setting.
          alternate
          The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an ease-in animation is replaced with an ease-out animation when played in reverse.

          Examples

          See CSS animations for examples.

          Browser compatibility

          • Desktop
          • Mobile

          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
          Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
          Basic support ? ? ? ? ?

          Tags (6)

          Edit tags

          Attachments (0)

           

          Attach file

          Page last modified 12:04, 25 Oct 2011 by teoli

          animation-duration - MDN

            animation-duration

            « CSS « CSS Reference

            Summary

            The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.

            A value of 0 (the default) indicates that no animation should occur.

            It is often convenient to use the shorthand property animation to set all animation properties at once.

            Syntax

            animation-duration: <time> [, <time>]*
            

            Values

            <time>
            The duration that an animation should take to complete one cycle. This may be specified in either seconds (by specifying "s" as the unit) or milliseconds (by specifying "ms" as the unit). If you don't specify a unit, seconds are assumed.
            Note: Negative values are treated as 0.

            Examples

            See CSS animations for examples.

            Browser compatibility

            • Desktop
            • Mobile

            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
            Basic support 3.0 -webkit 5.0 (5.0) -moz 10 -ms [1] -- 4.0 -webkit
            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
            Basic support 2.0 -webkit 5.0 (5.0) -moz -- -- 4.2 -webkit

            Tags (4)

            Edit tags

            Attachments (0)

             

            Attach file

            Page last modified 12:05, 25 Oct 2011 by teoli

            animation-fill-mode - MDN

              animation-fill-mode

              « CSS « CSS Reference

              DRAFT
              This page is not complete.

              Summary

              The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.

              Syntax

              animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]*
              

              Values

              none
              The animation will not apply any styles to the target before or after it is executing.
              forwards
              The target will retain the computed values set by the last keyframe encountered during execution. This is usually the '100%' or 'to' keyframe, unless animation-direction is 'alternate' and animation-iteration-count is set to an even number, in which case it is the '0%' or 'to' keyframe.
              backwards
              The animation will apply the values defined in the '0%' or 'from' keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
              both
              The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

              Examples

              h1 {
                animation-fill-mode: forwards;
              }

              Browser compatibility

              • Desktop
              • Mobile

              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
              Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
              Basic support ? ? ? ? ?

              Tags (2)

              Edit tags

              Attachments (0)

               

              Attach file

              Page last modified 12:06, 25 Oct 2011 by teoli

              animation - MDN

                animation

                Table of contents

                  1. 1.1. Summary
                  2. 1.2. Syntax
                  3. 1.3. Examples
                  4. 1.4. Browser compatibility
                  5. 1.5. Specifications
                1. 2. See also
                Table of contents
                  1. 1.1. Summary
                  2. 1.2. Syntax
                  3. 1.3. Examples
                  4. 1.4. Browser compatibility
                  5. 1.5. Specifications
                1. 2. See also

                This is an experimental feature
                Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

                Summary

                The animation property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction.

                A list of CSS properties that can be animated is available; it's worth noting that these are the same properties supported by CSS transitions.

                Syntax

                animation:  [ <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
                              <animation-iteration-count> || <animation-direction>] 
                            [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
                              <animation-iteration-count> || <animation-direction>] ]*  
                

                Examples

                See CSS animations for examples.

                Browser compatibility

                • Desktop
                • Mobile

                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms -- 4.0 -webkit
                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                Basic support ? 5.0 (5.0) -moz ? -- iOS 2.0 -webkit

                Tags (7)

                Edit tags

                Attachments (0)

                 

                Attach file

                Page last modified 06:40, 23 Oct 2011 by teoli

                animation-iteration-count - MDN

                  animation-iteration-count

                  « CSS « CSS Reference

                  DRAFT
                  This page is not complete.

                  Summary

                  The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.

                  It is often convenient to use the shorthand property animation to set all animation properties at once.

                  Syntax

                  animation-iteration-count: infinite | <number> [, infinite | <number>]*
                  

                  Values

                  infinite
                  The animation will repeat forever.
                  <number>
                  The number of times the animation should repeat; this is 1 by default. Negative values are treated like 0. You may specify non-integer values to play part of an animation cycle (for example 0.5 will play half of the animation cycle).

                  Examples

                  See CSS animations for examples.

                  Browser compatibility

                  • Desktop
                  • Mobile

                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                  Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                  Basic support ? ? ? ? ?

                  Tags (5)

                  Edit tags

                  Attachments (0)

                   

                  Attach file

                  Page last modified 12:08, 25 Oct 2011 by teoli

                  animation-name - MDN

                    animation-name

                    « CSS « CSS Reference

                    DRAFT
                    This page is not complete.

                    Summary

                    The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

                    It is often convenient to use the shorthand property animation to set all animation properties at once.

                    Syntax

                    animation-name: none | <name> [, none | <name>]*
                    

                    Values

                    <name>
                    A string identifying the animation.

                    Examples

                    See CSS animations for examples.

                    Browser compatibility

                    • Desktop
                    • Mobile

                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                    Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                    Basic support ? ? ? ? ?

                    Tags (6)

                    Edit tags

                    Attachments (0)

                     

                    Attach file

                    Page last modified 12:10, 25 Oct 2011 by teoli

                    animation-play-state - MDN

                      animation-play-state

                      « CSS « CSS Reference

                      DRAFT
                      This page is not complete.

                      Summary

                      The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.

                      Note: At this time, this property is being considered for removal from the specification, since its functionality can be simulated by other means.

                      Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

                      Syntax

                      animation-play-state: running | paused [, running | paused]*
                      

                      Values

                      running
                      The animation is currently playing.
                      paused
                      The animation is currently paused.

                      Examples

                      See CSS animations for examples.

                      Browser compatibility

                      • Desktop
                      • Mobile

                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                      Basic support (Supported) -webkit 5.0 (5.0) -moz ? ? (Supported) -webkit
                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                      Basic support ? ? ? ? ?

                      Tags (6)

                      Edit tags

                      Attachments (0)

                       

                      Attach file

                      Page last modified 12:32, 24 Aug 2011 by yyss

                      animation-timing-function - MDN

                        animation-timing-function

                        « CSS « CSS Reference

                        DRAFT
                        This page is not complete.

                        Summary

                        The animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function> .

                        For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of the keyframe and at the end of the keyframe.

                        An animation timing function defined within a keyframe block applies to that keyframe; otherwise. If no timing function is specified for the keyframe, the timing function specified for the overall animation is used.

                        It is often convenient to use the shorthand property animation to set all animation properties at once.

                        Syntax

                        animation-timing-function: <timing-function> [, <timing-function>]*
                        

                        where:

                        Each <timing-function> represents the timing function to link to the corresponding property to animate, as defined in animation-property.

                        Examples

                        See CSS animations for examples.

                        Browser compatibility

                        • Desktop
                        • Mobile

                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                        Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                        Basic support ? ? ? ? ?

                        Tags (6)

                        Edit tags

                        Attachments (0)

                         

                        Attach file

                        Page last modified 14:17, 4 Nov 2011 by PlanOff

                        auto - MDN

                          auto

                          Table of contents

                          1. 1. Summary
                          2. 2. Used in
                          Table of contents
                          1. 1. Summary
                          2. 2. Used in

                          « CSS « CSS Reference

                          Summary

                          Signifies a value that is to be automatically computed by a useragent.  The specific effects of auto depend on the property to which it is applied as its value.

                          Used in

                          Tags (4)

                          Edit tags

                          Attachments (0)

                           

                          Attach file

                          Page last modified 19:42, 13 Aug 2011 by Pointy

                          backface-visibility - MDN

                            backface-visibility

                            This is an experimental feature
                            Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

                            Summary

                            The backface-visibility CSS property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

                            There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side).

                            Syntax

                            backface-visibility: visibility
                            

                            where :

                            visibility
                            Is a keyword indicating if the backface must be visible or not. It can have the following values:
                            • visible meaning that the back face is visible, allowing the front face to be displayed mirrored;
                            • hidden meaning that the back face is not visible, hiding the front face.

                            Examples

                            backface-visibility: visible; backface-visibility: hidden;
                            1
                            2
                            3
                            4
                            5
                            6
                            1
                            2
                            3
                            4
                            5
                            6

                            Though not opaque, the front sides don't let the
                            back faces of the hidden sides to be displayed.

                            Specifications

                            Specification Status Comment
                            CSS 3D Transforms Level 3 Working Draft  

                            Browser compatibility

                            • Desktop
                            • Mobile

                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                            Basic support 12 -webkit 10.0 (10) -moz 10 -ms -- (Supported) -webkit
                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                            Basic support 3.0 -webkit 10.0 (10) -moz ? -- (Supported) -webkit

                            See also

                            Tags (4)

                            Edit tags

                            Attachments (0)

                             

                            Attach file

                            Page last modified 11:36, 1 Nov 2011 by teoli

                            background-attachment - MDN

                              background-attachment

                              « CSS « CSS Reference

                              Summary

                              If a background-image is specified, background-attachment determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

                              Syntax

                              background-attachment:  <attachment>[, <attachment>]*
                              

                              Where:

                              <attachment>
                              scroll | fixed | local

                              Gecko 1.9.2 note

                              Gecko 1.9.2 introduced support for multiple background images; prior to 1.9.2, only one value is supported.

                              Values

                              scroll
                              If scroll is specified, the background image will scroll within the viewport along with the block the image is contained within.
                              fixed
                              If fixed is specified, the background image will not scroll with its containing element, instead remaining stationary within the viewport.
                              local
                              Unimplemented in Gecko (Firefox)

                              Examples

                              View Live Examples

                              body {
                              	background-image: url("images/cartooncat.png");
                              	background-attachment: fixed;
                              }
                              

                              Multiple background image support

                              Gecko 1.9.2 supports multiple background images. You can specify a different <attachment> for each background, separated by commas:

                              body {
                                background-image: url("img1.png"), url("img2.png");
                                background-attachment: scroll, fixed;
                              } 
                              

                              Each image is matched with the corresponding attachment type, from first specified to last.

                              Browser Compatibility

                              • Desktop
                              • Mobile

                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                              Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
                              Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3
                              local 4.0 -- [1] 9.0 10.5 5.0
                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                              Basic support 2.1 1.0 (1.9.2) ? 10.0 3.2
                              Multiple backgrounds 2.1 1.0 (1.9.2) ? 10.0 3.2
                              local ? -- [2] ? ? ?

                              Tags (2)

                              Edit tags

                              Attachments (0)

                               

                              Attach file

                              Page last modified 07:10, 24 Oct 2011 by teoli

                              background-clip | -moz-background-clip - MDN

                                background-clip | -moz-background-clip

                                « CSS « CSS Reference

                                Summary

                                The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

                                -moz-background-clip is supported up to Gecko version 1.9.2 (Firefox 3.6). To support both, older and newer versions of Gecko (Firefox), you have to add both properties in the stylesheet (see examples).

                                If there is no background-image, this property has only visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

                                Syntax

                                background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*
                                
                                -moz-background-clip:  [border | padding][, [border | padding]]*   /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
                                

                                Values

                                border-box Requires Gecko 2.0
                                border (Firefox 1.0-3.6)
                                The background extends to the outside edge of the border (but underneath the border in z-ordering).
                                Default value, but see Browser compatibility section below for special case Internet Explorer 7.
                                padding-box Requires Gecko 2.0
                                padding (Firefox 1.0-3.6)
                                No background is drawn below the border (background extends to the outside edge of the padding).
                                content-box Requires Gecko 2.0
                                The background is painted within (clipped to) the content box.

                                Examples

                                 pre {
                                   border: 5px navy;
                                   border-style: dotted double;
                                   background: #F8D575;
                                   /* The yellow background will not go behind the border */
                                      -moz-background-clip: padding;      /* Firefox 1.0-3.6 */
                                   -webkit-background-clip: padding-box;  /* Safari, Chrome */
                                           background-clip: padding-box;  /* Firefox 4.0+, Opera 10.5, Chrome */
                                 }
                                

                                Browser compatibility

                                Browser Lowest version Support of
                                Chrome 1.0 -webkit-background-clip: padding | border | content
                                -webkit-background-clip: padding-box | border-box | content-box
                                1.0 background-clip: padding-box | border-box
                                background-clip: padding-box | border-box | content-box
                                Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-clip: padding | border
                                4.0 (2.0) background-clip: padding-box | border-box | content-box
                                Internet Explorer 9.0 [*] background-clip: padding-box | border-box | content-box
                                Opera 10.5 background-clip: padding-box | border-box
                                Safari (WebKit) 3.0 (522) -webkit-background-clip: padding | border | content
                                -webkit-background-clip: padding-box | border-box | content-box
                                • [*]  IE 7 (not other versions of IE) behaves like background-clip:padding if overflow: hidden | auto | scroll.
                                • Konqueror 3.5.4 supports -khtml-background-clip.

                                Tags (2)

                                Edit tags

                                Attachments (0)

                                 

                                Attach file

                                Page last modified 17:03, 9 Apr 2011 by Elchi3

                                background-color - MDN

                                  background-color

                                  « CSS « CSS Reference

                                  Summary

                                  background-color sets the background color of an element, either through a color value or the keyword transparent.

                                  Syntax

                                  background-color: color | transparent | inherit
                                  

                                  Values

                                  color 
                                  The color can be specified as a hexadecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.
                                  transparent 
                                  The default value for background-color is transparent meaning the element has no color of its own, instead showing the color of the element behind it.

                                  Examples

                                  View Live Examples

                                  .exampleOne {
                                  	background-color: teal;
                                  	color: white;
                                  }
                                  
                                  .exampleTwo {
                                  	background-color: rgb(153,102,153);
                                  	color: rgb(255,255,204);
                                  }
                                  
                                  .exampleThree {
                                  	background-color: #666699;
                                  	color: #FFFFFF;
                                  }
                                  
                                  

                                  Notes

                                  Color reference: See color values.

                                  Browser compatibility

                                  • Desktop
                                  • Mobile

                                  Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
                                  Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
                                  Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                  Basic support 1.0 (1.9.2) (Supported) (Supported) (Supported) (Supported)

                                  Tags (2)

                                  Edit tags

                                  Attachments (0)

                                   

                                  Attach file

                                  Page last modified 08:06, 14 Apr 2011 by Yuichiro

                                  background - MDN

                                    background

                                    « CSS « CSS Reference

                                    Summary

                                    The background CSS property is a shorthand property for setting the individual background property values in a single place in the style sheet. background can be used to set the values for one or more of: background-color, background-image, background-position, background-repeat, -moz-background-size, and background-attachment.

                                    The background shorthand property assigns explicit given values and sets missing properties to their initial values.

                                    Syntax

                                    background:  [<bg-layer>, ]* <final-bg-layer>
                                    

                                    Where:

                                    <bg-layer>
                                    [ <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
                                    inherit
                                    <final-bg-layer>
                                    [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
                                    inherit || <background-color>

                                    Gecko 1.9.2 note
                                    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

                                    Support for multiple backgrounds was added in Gecko 1.9.2; prior to this, only a single background could be specified.

                                    Gecko 2.0 note
                                    (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                    Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduced support for using SVG images as CSS backgrounds.

                                    Values

                                    One or more of the following, in any order:

                                    <background-color>
                                    See background-color
                                    <background-image>
                                    See background-image
                                    <background-repeat>
                                    See background-repeat
                                    <background-attachment>
                                    See background-attachment
                                    <background-position>
                                    See background-position

                                    Examples

                                    View Live Examples

                                    body { background: red; }
                                    
                                    .topbanner { background: url("topbanner.png") #00D repeat-y fixed; }
                                    

                                    Notes

                                    The background property first sets the individual background properties to their initial values, then assigns the explicit values specified in the declaration. You do not have to define a value for each of the individual properties, only those you want to change from their initial defaults.

                                    Browser compatibility

                                    • Desktop
                                    • Mobile

                                    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                    Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
                                    Multiple backgrounds 3.6 (1.9.2) 1.0 9.0 10.5 1.3
                                    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                    Basic support 1.0 (1.9.2) 2.1 ? 10.0 3.2
                                    Multiple backgrounds 1.0 (1.9.2) 2.1 ? 10.0 3.2

                                    Tags (2)

                                    Edit tags

                                    Attachments (0)

                                     

                                    Attach file

                                    Page last modified 08:13, 14 Apr 2011 by Yuichiro

                                    background-image - MDN

                                      background-image

                                      « CSS « CSS Reference

                                      Summary

                                      The background-image CSS property sets the background image for an element. It is often more convenient to use the shorthand background.

                                      Syntax

                                      background-image:  <bg-image>[, <bg-image>]*
                                      

                                      Where:

                                      <bg-image>
                                      <uri> | <gradient> | none

                                      Gecko 1.9.2 note

                                      Support for multiple, comma-separated, background images was added in Gecko 1.9.2.

                                      Gecko 2.0 note
                                      (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                      Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) , you can use SVG images as CSS backgrounds.

                                      Values

                                      <uri>
                                      The location of the image resource to be used as a background image.
                                      none
                                      Used to specify that an element is to have no background image.

                                      Mozilla Extensions

                                      <gradient> Requires Gecko 1.9.2
                                      -moz-linear-gradient() or -moz-radial-gradient() CSS function.

                                      Examples

                                      View Live Examples

                                      body { background-image: url("images/darkpattern.png"); }
                                      
                                      div { background-image: url("images/foo.png"), url("images/bar.png"); }
                                      
                                      p { background-image: none; }
                                      

                                      Notes

                                      Developers should ensure that they specify a background-color to be used if an image is not available. Background images are rendered on top of the background color.

                                      Browser compatibility

                                      • Desktop
                                      • Mobile

                                      Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                      Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
                                      Multiple backgrounds 3.6 (1.9.2) 1.0 9.0 yes 1.3
                                      Gradients 3.6 (1.9.2) -moz 1.0 -webkit -- -- 4.0 -webkit
                                      SVG background 4.0 (2.0) 8.0 9.0 9.5 5.0
                                      Feature iOS Safari Opera Mini Opera Mobile Android Browser
                                      Basic support yes yes yes yes
                                      Multiple backgrounds yes yes yes yes
                                      Gradients yes -webkit ? ? yes -webkit
                                      SVG background yes, but see below yes yes --

                                      Notes

                                      • Support of SVG in CSS background is incomplete in the current version of iOS Safari (4.2-4.3). The same for Safari prior 5.0.

                                      Tags (2)

                                      Edit tags

                                      Attachments (0)

                                       

                                      Attach file

                                      Page last modified 21:25, 6 May 2011 by mdnmullany

                                      background-origin - MDN

                                        background-origin

                                        « CSS « CSS Reference

                                        Summary

                                        The background-origin CSS property determines the background positioning area (the origin of a background-image).
                                        background-origin does not apply when background-attachment is fixed.

                                        This property is reset to its initial value by the background shorthand property.

                                        Syntax

                                        /* since Gecko 2.0 (Firefox 4.0) */
                                        background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
                                        
                                        /* older versions (multiple backgrounds since Gecko 1.9.2 / Firefox 3.6) */
                                        -moz-background-origin: [padding | border | content][, [border | padding | content]]*
                                        

                                        Values

                                        padding-box New in Firefox 4
                                        padding (Firefox 1.0-3.6)
                                        Default value. The background position is relative to the padding. (For single boxes "0 0" is the upper left corner of the padding edge, "100% 100%" is the lower right corner.)
                                        border-box New in Firefox 4
                                        border (Firefox 1.0-3.6)
                                        The background position is relative to the border, so the image can go behind the border.
                                        content-box New in Firefox 4
                                        content (Firefox 1.0-3.6)
                                        The background position is relative to the content.

                                        Examples

                                         .example {
                                           border: 10px double;
                                           padding: 10px;
                                           background: url('image.jpg');
                                           background-position: center left;
                                           /* The background will be inside the padding */       
                                           -moz-background-origin: content;          /* Firefox 1.0-3.6 */
                                           -webkit-background-origin: content-box;   /* Safari, Chrome */
                                                   background-origin: content-box;   /* Firefox 4.0+ */
                                        }
                                        
                                        div {
                                          background-image: url('mainback.png'), url('logo.jpg');
                                          background-position: 0px 0px, top right;
                                          -moz-background-origin: padding, content;
                                          -webkit-background-origin: padding-box, content;
                                                  background-origin: padding-box, content-box;
                                        }

                                        Browser compatibility

                                        Browser Lowest version Support of
                                        Chrome 1.0 -webkit-background-origin: padding | border | content
                                        -webkit-background-origin: padding-box | border-box | content-box
                                        1.0 background-origin: padding | border | content
                                        background-origin: padding-box | border-box | content-box
                                        Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-origin: padding | border | content
                                        4.0 (2.0) background-origin: padding-box | border-box | content-box
                                        Internet Explorer 9.0 [*] background-origin: padding-box | border-box | content-box
                                        Opera 10.5 background-origin: padding-box | border-box | content-box
                                        Safari (WebKit) 3.0 (522) -webkit-background-origin: padding | border | content
                                        4.0 -webkit-background-origin: padding-box | border-box | content-box
                                        5.0 background-origin: padding-box | border-box | content-box
                                        • [*] IE up to version 7 behaves as if it were background-origin: border-box;
                                        • [**] IE 8 behaves as if it were background-origin: padding-box;
                                        • Konqueror 3.5.4 supports -khtml-background-origin.

                                        Specifications

                                        Tags (2)

                                        Edit tags

                                        Attachments (0)

                                         

                                        Attach file

                                        Page last modified 13:19, 9 Nov 2011 by teoli

                                        background-position - MDN

                                          background-position

                                          « CSS « CSS Reference

                                          Summary

                                          The background-position CSS property sets the initial position of any background image that has been set.

                                          It is often more convenient to use the shorthand background.

                                          Syntax

                                          background-position:  <bg-position>[, <bg-position>]*
                                          background-position:  [ 
                                          <percentage>| 
                                          
                                          <length>| left | center | right  ] 
                                                                [ <percentage> | <length> | top  | center | bottom ]?
                                          
                                          background-position:  [ top | center | bottom ]
                                          
                                          background-position:  
                                          inherit
                                          

                                          Where:

                                          <bg-position> is one of:
                                          [ <percentage>| <length>| left | center | right  ]
                                                                [ <percentage> | <length> | top  | center | bottom ]?
                                          [ top | center | bottom ]
                                          inherit

                                          Values

                                          Accepts one or two values, up to four values in supporting browsers. Negative <percentage> and <length> values are allowed.

                                          • If only one value is specified, the second value is assumed to be center.
                                          • The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).

                                          The specifications allow for 4 values enabling offsetting a background image from any corner, not just the top left. If four values are specified, they must include two sides and two offsets. This is not yet fully supported in all browsers.

                                          <percentage>
                                          With a value pair of 0% 0%, (is equal to 0 0) the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of padding area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
                                          <length>
                                          With a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
                                          top
                                          Equivalent to 0% for the vertical position.
                                          right
                                          Equivalent to 100% for the horizontal position.
                                          bottom
                                          Equivalent to 100% for the vertical position.
                                          left
                                          Equivalent to 0% for the horizontal position.
                                          center
                                          Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

                                          Examples

                                          View the live example

                                          .exampleone {
                                          	background-image: url("logo.png");
                                          	background-position: top;
                                          }
                                          
                                          .exampletwo {
                                          	background-image: url("logo.png");
                                          	background-position: 25% 75%;
                                          }
                                          
                                          .examplethree {
                                          	background: url("logo.png") 2cm bottom;
                                          }
                                          
                                          .examplefour {
                                          	background-image: url("logo.png");
                                          	background-position: center 10%;
                                          }
                                          
                                          .examplefive {
                                          	background: url("logo.png") 3em 50%;
                                          }
                                          
                                          .examplesix {
                                          	background-image: url("logo.png");
                                          	background-position: right 20px bottom 20px;
                                          
                                           

                                          Multiple background image support

                                          Gecko 1.9.2 supports multiple background images. You can specify a different <bg-position> for each background, separated by commas:

                                          .examplesix {
                                            background-image: url("img1.png"), url("img2.png");
                                            background-position: 0px 0px, center;
                                          } 
                                          

                                          Each image is matched with the corresponding position style, from first specified to last.

                                          Browser compatibility

                                          Browser Lowest version Multiple Backgrounds Four values
                                          Chrome 1.0  1.0 --
                                          Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2) --
                                          Internet Explorer 4.0 9.0 9.0
                                          Opera 3.5 10.5 10.5
                                          Safari (WebKit) 1.0 (85) 1.3 (312) --

                                          Tags (3)

                                          Edit tags

                                          Attachments (0)

                                           

                                          Attach file

                                          Page last modified 22:33, 23 Oct 2011 by barraponto

                                          background-repeat - MDN

                                            background-repeat

                                            « CSS « CSS Reference

                                            Summary

                                            background-repeat specifies whether the image is repeated (tiled), and how.

                                            Syntax

                                            background-repeat: <repeat-style>[, <repeat-style>]*
                                            

                                            Where:

                                            <repeat-style>
                                            repeat | repeat-x | repeat-y | no-repeat | inherit | round | space 

                                            Gecko 1.9.2 note

                                            Gecko 1.9.2 added support for multiple background repeat values.

                                            Values

                                            repeat
                                            The image is repeated both horizontally and vertically.
                                            repeat-x
                                            The image is repeated horizontally only.
                                            repeat-y
                                            The image is repeated vertically only.
                                            no-repeat
                                            The image is not repeated; only one copy of the image is drawn.
                                            space
                                            The image is repeated as many times as can fully fit, separated by white space if repeating does not create an exact fit.
                                            round
                                             The image is repeated as often as will fit. If it doesn't fit a whole number of times, the background images are rescaled so they do.

                                            If a <repeat-style> value specifies two keywords, the first is for the horizontal direction and the second is for the vertical direction.

                                            Examples

                                            View the live example

                                            .exampleone {
                                            	background-image: url("logo.png");
                                            	background-repeat: repeat-x;
                                            }
                                            
                                            .exampletwo {
                                            	background-image: url("logo.png");
                                            	background-repeat: no-repeat;
                                            }
                                            

                                            Multiple background image support

                                            Gecko 1.9.2 supports multiple background images. You can specify a different <repeat-style> for each background, separated by commas:

                                            .examplethree {
                                              background-image: url("img1.png"), url("img2.png");
                                              background-repeat: repeat-x, repeat-y;
                                            } 
                                            

                                            Each image is matched with the corresponding repeat style, from first specified to last.

                                            Specifications

                                            Browser compatibility

                                            Browser Lowest Version Space | Round Multiple Backgrounds Different Values for X & Y
                                            Chrome 1.0 -- 1.0
                                            Firefox (Gecko) 1.0 (1.0) -- 3.6 (1.9.2) --
                                            Internet Explorer 4.0 9.0 9.0 9.0
                                            Opera 3.5 10.5 10.5
                                            Safari (Webkit) 1.0 (85) -- 1.3 (312)

                                            Round / Space values are supported in IE9+ and Opera 11+

                                            Tags (2)

                                            Edit tags

                                            Attachments (0)

                                             

                                            Attach file

                                            Page last modified 03:28, 20 Sep 2011 by leaverou

                                            background-size - MDN

                                              background-size

                                              Summary

                                              The background-size CSS property specifies the size of the background images.

                                              Syntax

                                              background-size:  <bg-size>[, <bg-size>]*        /* Gecko 2.0 (Firefox 4.0) and later */
                                              

                                              Where <bg-size> is one of:

                                              Multiple values apply to individual background layers, from front to back, in the same manner as for all other background properties.

                                              Values

                                              <percentage>
                                              Scales the background image in the desired dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.
                                              <length>
                                              Scales the background image to the specified length in the desired dimension.
                                              auto
                                              Scales the background image in the relevant direction such that its intrinsic proportion is maintained.

                                              The first value determines how the image is scaled horizontally, the second how it is scaled vertically. If only one value is specified, the second value is implicitly auto.  Negative sizes are not allowed.

                                              contain
                                              Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
                                              cover
                                              Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

                                              Interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height).  A bitmap image always has intrinsic dimensions and an intrinsic proportion.  A vector image may have both intrinsic dimensions (and thus must have an intrinsic proportion).  It also may have one or no intrinsic dimension, and in either case it might or might not have an intrinsic proportion.  Gradients are treated as images with no intrinsic dimensions or intrinsic proportion.

                                              Gecko 8.0 note
                                              (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)

                                              This behavior changed in Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) . Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.

                                              Background images generated from elements using -moz-element (which actually match an element) are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion.

                                              Note: This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.

                                              The rendered size of the background image is then computed as follows:

                                              If both components of background-size are specified and are not auto:
                                              The background image renders at the specified size.
                                              If the background-size is contain or cover:
                                              The image is rendered, preserving its intrinsic proportion, at the largest size contained within, or covering, the background positioning area.  If the image has no intrinsic proportion, then it is rendered at the size of the background positioning area.
                                              If the background-size is auto or auto auto:
                                              If the image has both intrinsic dimensions, it is rendered at that size.  If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the background positioning area.  If it has no dimensions but has a proportion, it's rendered as if contain had been specified instead.  If the image has one intrinsic dimension and a proportion, it's rendered at the size determined by that one dimension and the proportion.  If the image has one intrinsic dimension but no proportion, it's rendered using the intrinsic dimension and the corresponding dimension of the background positioning area.
                                              If the background-size has one auto component and one non-auto component:
                                              If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion.  If the image has no intrinsic proportion, use the specified dimension for that dimension.  For the other dimension, use the image's corresponding intrinsic dimension if there is one.  If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.

                                              Note that background sizing for vector images that lack intrinsic dimensions or proportion is not yet fully implemented in all browsers.  Be careful about relying on the behavior described above, and test in multiple browsers (specifically including versions of Firefox 7 or earlier and Firefox 8 or greater) to be sure different renderings are acceptable.

                                              Examples

                                              This demonstration of background-size: cover and this demonstration of background-size: contain are meant to be opened in new windows so that you can see how contain and cover behave when the background positioning area's dimensions vary. This series of demos of how background-size works and interacts with other background-* properties should pretty much cover the remaining ground in how to use background-size alone and in conjunction with other properties.

                                              Notes

                                              While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using -moz-border-image.

                                              .foo {
                                                      background-image: url(bg-image.png);
                                              
                                                     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
                                                       -o-background-size: 100% 100%;           /* Opera 9.5 */
                                                  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
                                                          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
                                               
                                                     -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
                                              }

                                              If you are specifying a gradient as background and have specified a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%).  Rendering of gradients in such cases changed in Firefox 8, and at present it is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

                                              .bar {
                                                     width: 50px; height: 100px;
                                                     background-image: gradient(...);
                                              
                                                     /* NOT RECOMMENDED */
                                                     background-size: 25px;
                                                     background-size: 50%;
                                                     background-size: auto 50px;
                                                     background-size: auto 50%;
                                              
                                                     /* OKAY */
                                                     background-size: 25px 50px;
                                                     background-size: 50% 50%;
                                              }

                                              Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a gradient, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

                                              Browser compatibility

                                              • Desktop
                                              • Mobile

                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                              Basic support 1.0 -webkit 3.6 (1.9.2) -moz 9.0 9.5 -o
                                              with some bugs (see below)
                                              3.0 (522) -webkit
                                              but from an older CSS3 draft (see below)
                                              3.0 4.0 (2.0) 10.0
                                              Support for
                                              contain | cover
                                              3.0 3.6 (1.9.2) 9.0 10.0 4.1 (532)
                                              Support for SVG backgrounds ? 8.0 (8.0) ? ? ?
                                              Feature Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
                                              Basic support ? ? ? ? ?
                                              Support for SVG backgrounds ? 8.0 (8.0) ? ? ?
                                              • As of July 2009, Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds.  Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension.
                                              • WebKit-based browsers as of July 2009 implement an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.
                                              • Konqueror 3.5.4 supports -khtml-background-size.
                                              • -moz-background-size is no longer supported in Gecko 2.0; you must use background-size instead.
                                              • See Scaling of SVG backgrounds for details on how SVG images are scaled when used for background-size.

                                              Tags (5)

                                              Edit tags

                                              Attachments (0)

                                               

                                              Attach file

                                              Page last modified 18:40, 3 Nov 2011 by Sheppy

                                              :before | ::before - MDN

                                                :before | ::before

                                                « CSS « CSS Reference

                                                Summary

                                                :before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.

                                                Firefox 3.5 note

                                                Firefox prior to version 3.5 only implemented the CSS 2.0 version of :before. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions. (Note this is independent from the :: notation issue mentioned below.)

                                                Syntax

                                                element:before  { style properties }  /* CSS2 syntax */
                                                
                                                element::before { style properties }  /* CSS3 syntax */
                                                

                                                The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.

                                                Note:  Microsoft Internet Explorer 8 only supports the :before notation.

                                                Examples

                                                q:before { content: "»" }
                                                q:after { content: '«' }
                                                
                                                <q>Some quotes</q>, he said, <q>are better than none</q>.
                                                

                                                Result:    »Some quotes«, he said, »are better than none«.

                                                Notes

                                                Although the positioning fixes in Firefox 3.5 do not allow content to be generated as a separate previous sibling (as per the CSS spec stating "The :before and :after pseudo-elements elements interact with other boxes... as if they were real elements inserted just inside their associated element."), they can be used to provide a slight improvement on tableless layouts (e.g., to achieve centering) in that, as long as the content to be centered is wrapped in a further child, a column before and after the content can be introduced without adding a previous or following sibling (i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after). (And always remember to add a width to a float, since, otherwise, it will not float!)

                                                <style type="text/css">
                                                
                                                #floatme {float:left; width:50%;}
                                                
                                                .example:before {
                                                  content: "Floated Before"; /* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
                                                  float: left;
                                                  width:25%
                                                }
                                                .example:after {
                                                  content: "Floated After";
                                                  float: right;
                                                  width:25%
                                                }
                                                
                                                /* For styling */
                                                .example:before, .example:after, .first {
                                                  background: yellow;
                                                  color: red;
                                                }
                                                
                                                
                                                </style>
                                                <div class="example">
                                                <span id="floatme">"Floated Before" should be generated on the left of the 
                                                viewport and not allow overflow in this line to flow under it. Likewise 
                                                should "Floated After" appear on the right of the viewport and not allow this 
                                                line to flow under it.</span>
                                                </div>

                                                Browser compatibility

                                                Browser Lowest Version Support of
                                                Internet Explorer 8.0 :before
                                                Firefox (Gecko) 1.0 (1.0) :before
                                                1.0 (1.5) :before | ::before
                                                Safari (WebKit) 1.0 (85) :before | ::before
                                                Opera 4.0 :before
                                                7.0 :before | ::before

                                                See Also

                                                :after, content

                                                Tags (3)

                                                Edit tags

                                                Attachments (0)

                                                 

                                                Attach file

                                                Page last modified 22:27, 4 Jul 2009 by Jürgen Jeka

                                                border-bottom-color - MDN

                                                  Page last modified 01:50, 13 Apr 2011 by Yuichiro

                                                  border-bottom - MDN

                                                    border-bottom

                                                    « CSS « CSS Reference

                                                    Summary

                                                    The border-bottom property is a shorthand property that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.

                                                    Syntax

                                                    border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
                                                    

                                                    Values

                                                    <border-width> 
                                                    See border-bottom-width.
                                                    <border-style> 
                                                    See border-bottom-style.
                                                    <border-color> 
                                                    See border-bottom-color.

                                                    Examples

                                                    View Live Examples

                                                    element { 
                                                        border-bottom: 1px solid #000;
                                                    }
                                                    

                                                    Notes

                                                    The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

                                                    As with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:

                                                      border-bottom-style: dotted;
                                                      border-bottom: thick green;

                                                    is actually the same as

                                                      border-bottom-style: dotted;
                                                      border-bottom: none thick green;

                                                    and the value of border-bottom-style given before border-bottom is ignored.

                                                    Since the default value of border-bottom-style is none, not specifying the <border-style> part of the value means that the property specifies no border.

                                                    Specifications

                                                    Browser compatibility

                                                    Browser Lowest Version
                                                    Chrome 1.0
                                                    Firefox 1
                                                    Internet Explorer 4
                                                    Netscape 4
                                                    Opera 3.5

                                                    Tags (2)

                                                    Edit tags

                                                    Attachments (0)

                                                     

                                                    Attach file

                                                    Page last modified 01:54, 14 Apr 2011 by Yuichiro

                                                    border-bottom-left-radius - MDN

                                                      border-bottom-left-radius

                                                      Table of contents

                                                      1. 1. Summary
                                                      Table of contents
                                                      1. 1. Summary

                                                      « CSS « CSS Reference

                                                      Summary

                                                      The CSS property border-bottom-left-radius sets the rounding of the bottom-left corner of the border. Previous to Gecko 2.0 (Firefox 4.0) this was named -moz-border-radius-bottomleft.

                                                      See the border-top-left-radius and border-radius properties for more information.

                                                       

                                                      Tags (3)

                                                      Edit tags

                                                      Attachments (0)

                                                       

                                                      Attach file

                                                      Page last modified 02:13, 12 Apr 2011 by Yuichiro

                                                      border-bottom-right-radius - MDN

                                                        border-bottom-right-radius

                                                        Table of contents

                                                        1. 1. Summary
                                                        Table of contents
                                                        1. 1. Summary

                                                        « CSS « CSS Reference

                                                        Summary

                                                        The CSS property border-bottom-right-radius sets the rounding of the bottom-right corner of the border. Previous to Gecko 2.0 (Firefox 4.0) this was named -moz-border-radius-bottomright.

                                                        See the border-top-left-radius and border-radius properties for more information.

                                                        Tags (3)

                                                        Edit tags

                                                        Attachments (0)

                                                         

                                                        Attach file

                                                        Page last modified 01:37, 12 Apr 2011 by Yuichiro

                                                        border-bottom-style - MDN

                                                          border-bottom-style

                                                          « CSS « CSS Reference

                                                          Summary

                                                          border-bottom-style sets the line style of the bottom border of a box.

                                                          Syntax

                                                          border-bottom-style: <border-style> | inherit
                                                          

                                                          <border-style> Values

                                                          none 
                                                          No border.
                                                          hidden 
                                                          Same as 'none', except in terms of border conflict resolution for table elements.
                                                          dotted 
                                                          Series of dots.
                                                          dashed 
                                                          Series of short dashes or line segments.
                                                          solid 
                                                          Single, straight, solid line.
                                                          double 
                                                          Two straight lines that add up to the pixel amount defined as border-width.
                                                          groove 
                                                          Carved effect.
                                                          ridge 
                                                          Opposite of 'groove'. The border appears 3D (coming out).
                                                          inset 
                                                          Makes the box appear embedded.
                                                          outset 
                                                          Opposite of 'inset'. Makes the box appear 3D (embossed).

                                                          Examples

                                                          View Live Examples

                                                          element {
                                                                  border-bottom-size: 1px;
                                                                  border-bottom-style: dotted;
                                                                  border-bottom-color: #000;
                                                          }
                                                          

                                                          Notes

                                                          Unless a border-style value is set, your border will not appear because the default value is set to 'none.'

                                                          Specifications

                                                          Browser Compatibility

                                                          • Desktop
                                                          • Mobile

                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                          Basic support 1.0 1.0 5.5 9.2 1.0
                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                          Basic support ? ? ? ? ?

                                                          Tags (2)

                                                          Edit tags

                                                          Attachments (0)

                                                           

                                                          Attach file

                                                          Page last modified 05:43, 13 Apr 2011 by Yuichiro

                                                          border-bottom-width - MDN

                                                            border-bottom-width

                                                            « CSS « CSS Reference

                                                            Summary

                                                            border-bottom-width sets the width of the bottom border of a box.

                                                            Syntax

                                                            border-bottom-width: <border-width> | inherit
                                                            

                                                            <border-width> Values

                                                            thin
                                                            A thin border.
                                                            medium
                                                            A medium border.
                                                            thick
                                                            A thick border.
                                                            <length>
                                                            The border's thickness has an explicit value. Explicit border widths cannot be negative.

                                                            Note: An em value is also supported.

                                                            Examples

                                                            View Live Examples

                                                            element { 
                                                                border-bottom-width: thin;
                                                                border-bottom-style: solid;
                                                                border-bottom-color: #000;
                                                            }
                                                            

                                                            Specifications

                                                            Browser Compatibility

                                                            • Desktop
                                                            • Mobile

                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                            Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                            Basic support ? ? ? ? ?

                                                            Tags (2)

                                                            Edit tags

                                                            Attachments (0)

                                                             

                                                            Attach file

                                                            Page last modified 14:42, 13 Oct 2011 by gordun

                                                            border-collapse - MDN

                                                              border-collapse

                                                              « CSS « CSS Reference

                                                              Summary

                                                              The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

                                                              The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

                                                              In the collapsed border model, adjacent table cells share borders.

                                                              Syntax

                                                              border-collapse:  collapse | separate | inherit

                                                              Values

                                                              separate
                                                              Default, use the "separated borders" rendering model
                                                              collapse
                                                              Use the "collapsed borders" rendering model

                                                              Examples

                                                              View Live Examples

                                                              th, td { border: solid 1px red; }
                                                              table { border-collapse: collapse; }
                                                              
                                                              <table border=6>
                                                              Browser Layout Engine
                                                              Internet Explorer Trident
                                                              Firefox Gecko
                                                              Opera Presto
                                                              Safari WebKit
                                                              <table border=6 style=
                                                              "border-collapse:collapse">
                                                              Browser Layout Engine
                                                              Internet Explorer Trident
                                                              Firefox Gecko
                                                              Opera Presto
                                                              Safari WebKit

                                                              Notes

                                                              In the "collapsed border" rendering model, the border-style value of inset behaves like groove, and outset behaves like ridge.

                                                              Specifications

                                                              Browser compatibility

                                                              • Desktop
                                                              • Mobile

                                                              Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                              Basic support 1.0 (1.7 or earlier) 1.0 5.0 4.0 1.2 (125)
                                                              Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                              Basic support 1.0 (1.9.2) ? ? ? ?

                                                              Tags (2)

                                                              Edit tags

                                                              Attachments (0)

                                                               

                                                              Attach file

                                                              Page last modified 08:45, 4 Apr 2011 by Rowno

                                                              border-color - MDN

                                                                border-color

                                                                « CSS « CSS Reference

                                                                Summary

                                                                The border-color CSS property is a shorthand property for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color

                                                                Syntax

                                                                border-color:  [ <color> || transparent ]{1,4} | inherit

                                                                Values

                                                                Accepts one, two, tree or four values.

                                                                <color>
                                                                See <color> value for possible keywords and units.
                                                                transparent
                                                                The border is not drawn but it still takes up space on the page.

                                                                If one color value is given, it applies to all four borders.
                                                                Two values apply first to the top and bottom border and second to the left and right border.
                                                                Three values apply first to the top, second to the left and right and third to the bottom border.
                                                                Four values apply to top, right, bottom and left border in that order.

                                                                Examples

                                                                View Live Examples

                                                                pre { 
                                                                  border-style: ridge dashed solid;
                                                                  border-color: orange blue;
                                                                }

                                                                Notes

                                                                In order to see the border you must at least set the border-style to something visible.

                                                                Specifications

                                                                Browser compatibility

                                                                • Desktop
                                                                • Mobile

                                                                Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
                                                                Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                Basic support 1.0 (1.9.2) ? ? ? ?

                                                                Mozilla Extensions

                                                                The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox.

                                                                -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors

                                                                Tags (2)

                                                                Edit tags

                                                                Attachments (0)

                                                                 

                                                                Attach file

                                                                Page last modified 03:11, 13 Apr 2011 by Yuichiro

                                                                border - MDN

                                                                  border

                                                                  « CSS « CSS Reference

                                                                  Summary

                                                                  The border property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

                                                                  Syntax

                                                                  border:  [ <border-width> || <border-style> || <border-color> ] | inherit
                                                                  

                                                                  Values

                                                                  border-width
                                                                  Optional, default value medium is used if absent. See border-width.
                                                                  border-style 
                                                                  Required, default value none is used if absent. See border-style.
                                                                  border-color 
                                                                  Optional, default value if absent: The value of the element's color property (foreground color). See border-color.

                                                                  Examples

                                                                  View Live Examples

                                                                  element { border: dashed }          /* dashed border of medium thickness, the same color as the text */
                                                                  element { border: dotted 1.5em }    /* dotted, 1.5em thick border, the same color as the text */
                                                                  element { border: solid red }       /* solid, red border of medium thickness */
                                                                  element { border: solid blue 10px } /* solid, blue border of 10px thickness */
                                                                  

                                                                  Notes

                                                                  While the border-width, border-style, and border-color properties accept up to four values, this property only accepts one value for each property.

                                                                  Browser compatibility

                                                                  • Desktop
                                                                  • Mobile

                                                                  Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                  Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85) [1]
                                                                  Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                  Basic support 1.0 (1.9.2) ? ? ? 1.0 [2]

                                                                  Tags (2)

                                                                  Edit tags

                                                                  Attachments (0)

                                                                   

                                                                  Attach file

                                                                  Page last modified 12:09, 31 Oct 2011 by teoli

                                                                  border-image - MDN

                                                                    border-image

                                                                    Summary

                                                                    The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases.

                                                                    Warning: The official CSS 3 specification for the border-image property changed significantly between the time this feature was frozen for Gecko 1.9.1 and its release. As such, both the syntax and semantics of this feature will probably change in future releases of Gecko. In particular, the optional border-width override has been removed from the specification and will almost certainly be removed in a future version of Gecko.

                                                                    The border-image is used instead of the border styles given by the border-style properties.  If the value is none or if the image cannot be displayed, the border styles will be used. An additional background image for the element is drawn on top of the background-image.

                                                                    Syntax

                                                                    none | 
                                                                      [ <image> [ <number> | <percentage> ]{1,4} [/ <border-width>{1,4}]? ] && [ stretch | repeat | round ]{0,2} 

                                                                    Values

                                                                    none
                                                                    No image displayed, other border styles are used.
                                                                    <image> (required)
                                                                    The image value is a <uri>, e.g. url(http://example.org/image.png)
                                                                    <number> | <percentage> (required)
                                                                    One, two, three or four values represent inward offsets from the top, right, bottom, and left edges of the image (respectively), dividing it into nine regions: four corners, four edges and a middle.

                                                                    One value belongs to all four sides of the image.
                                                                    Two values belong 1. to top and bottom and 2. to right and left side.
                                                                    Three values belong 1. to top, 2. to the right and left side and 3. to bottom.
                                                                    Four values belong to the top, right, bottom and left edge of the image in that order.

                                                                    In Gecko 1.9.1 (Firefox 3.5) the middle part of the image is drawn like a background-image of the element. This may change in future versions.

                                                                    Percentages are relative to the width/height of the image.
                                                                    Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is an SVG image).
                                                                    <border-width> (optional)
                                                                    If the slash / is present in the property value, the one, two, three or four values after it are used for the width of the border instead of the border-width properties. The order of the values is the same as for border-width.
                                                                    stretch | round | repeat (optional)
                                                                    One or two keywords, that specify how the images for the sides and the middle part are scaled and tiled.
                                                                    stretch  (default value) will cause images to be scaled to fit their box.
                                                                    round    will tile the images, but also scale them so that a whole number fit in the box.
                                                                    repeat   simply tiles the images inside the box.
                                                                    The first keyword describes how to draw the top, middle, and bottom images, while the second describes the left and right borders. If the second is absent, it is assumed to be the same as the first. If both are absent, the default value stretch is used.

                                                                    Examples

                                                                    [needs some instructive live examples]

                                                                    #header  { -moz-border-image: url(border.png) 27 27 27 27 round round; } 
                                                                    
                                                                    .button  { -moz-border-image: url(button.png) 0 5 0 5; }
                                                                    
                                                                    .example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }
                                                                    
                                                                    /* Edge case, acts like a full scaled background-image in Firefox 3.5 */
                                                                    
                                                                     div     { -moz-border-image: url(bgimage.png) 0; } 
                                                                    

                                                                    Browser compatibility

                                                                    Note:  Features beyond basic support are not yet documented in above sections. Please read the spec if you are interested.

                                                                    • Desktop
                                                                    • Mobile

                                                                    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                    Basic support 3.5 (1.9.1) -moz 7.0 -webkit -- 10.5 / 11.0 -o 3.0 -webkit
                                                                    optional <border-image-slice> --
                                                                    Unimplemented (see bug 497995 )
                                                                    ? -- ? ?
                                                                    fill keyword -- ? -- ? ?
                                                                    Feature iOS Safari Opera Mini Opera Mobile Android Browser
                                                                    Basic support 3.2 -webkit -- 11.0 -o 2.1 -webkit
                                                                    optional <border-image-slice> ? -- ? ?
                                                                    fill keyword ? -- ? ?

                                                                    Notes

                                                                    • Unusually, for Opera, the prefixed property was added after the non-prefixed.

                                                                    Tags (3)

                                                                    Edit tags

                                                                    Attachments (1)

                                                                    FileSizeDateAttached by 
                                                                    slice.png
                                                                    No description
                                                                    1406 bytes17:29, 5 Aug 2009Jürgen JekaActions

                                                                    Attach file

                                                                    Page last modified 13:41, 21 Sep 2011 by leaverou

                                                                    Mozilla Developer Network

                                                                    Mozilla Developer Network

                                                                    Join MDN | Log in

                                                                    It's the Web. You drive.

                                                                    Welcome to the Mozilla Developer Network.

                                                                    We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                    Browse Thousands of Docs for Web Developers

                                                                    And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                    Latest News & Updates

                                                                    • Mozilla Hacks Weekly, November 10th 2011

                                                                      We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                    • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                      Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                    • SDK Hack day: what to expect

                                                                      In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                    • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                      about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                    Awesome Demos

                                                                    More Demos…

                                                                    What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                    Mozilla Developer Network

                                                                    Mozilla Developer Network

                                                                    Join MDN | Log in

                                                                    It's the Web. You drive.

                                                                    Welcome to the Mozilla Developer Network.

                                                                    We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                    Browse Thousands of Docs for Web Developers

                                                                    And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                    Latest News & Updates

                                                                    • Mozilla Hacks Weekly, November 10th 2011

                                                                      We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                    • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                      Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                    • SDK Hack day: what to expect

                                                                      In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                    • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                      about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                    Awesome Demos

                                                                    More Demos…

                                                                    What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                    Mozilla Developer Network

                                                                    Mozilla Developer Network

                                                                    Join MDN | Log in

                                                                    It's the Web. You drive.

                                                                    Welcome to the Mozilla Developer Network.

                                                                    We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                    Browse Thousands of Docs for Web Developers

                                                                    And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                    Latest News & Updates

                                                                    • Mozilla Hacks Weekly, November 10th 2011

                                                                      We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                    • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                      Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                    • SDK Hack day: what to expect

                                                                      In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                    • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                      about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                    Awesome Demos

                                                                    More Demos…

                                                                    What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                    Mozilla Developer Network

                                                                    Mozilla Developer Network

                                                                    Join MDN | Log in

                                                                    It's the Web. You drive.

                                                                    Welcome to the Mozilla Developer Network.

                                                                    We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                    Browse Thousands of Docs for Web Developers

                                                                    And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                    Latest News & Updates

                                                                    • Mozilla Hacks Weekly, November 10th 2011

                                                                      We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                    • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                      Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                    • SDK Hack day: what to expect

                                                                      In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                    • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                      about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                    Awesome Demos

                                                                    More Demos…

                                                                    What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                    Mozilla Developer Network

                                                                    Mozilla Developer Network

                                                                    Join MDN | Log in

                                                                    It's the Web. You drive.

                                                                    Welcome to the Mozilla Developer Network.

                                                                    We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                    Browse Thousands of Docs for Web Developers

                                                                    And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                    Latest News & Updates

                                                                    • Mozilla Hacks Weekly, November 10th 2011

                                                                      We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                    • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                      Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                    • SDK Hack day: what to expect

                                                                      In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                    • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                      about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                    Awesome Demos

                                                                    More Demos…

                                                                    What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                    border-left-color - MDN

                                                                      Page last modified 01:57, 13 Apr 2011 by Yuichiro

                                                                      border-left - MDN

                                                                        border-left

                                                                        « CSS « CSS Reference

                                                                        Summary

                                                                        The border-left is a shorthand property for setting the width, style and color of left border of a box. This property can be used to set the values for one or more of: border-left-width, border-left-style, border-left-color. Omitted values are set to their initial values.

                                                                        Syntax

                                                                        border-left: [border-width || border-style || border-color | inherit] ;
                                                                        

                                                                        Values

                                                                        border-width
                                                                        See border-width.
                                                                        border-style 
                                                                        See border-style.
                                                                        border-color 
                                                                        See border-color.

                                                                        Examples

                                                                        element { 
                                                                            border-left: 1px solid #000;
                                                                        }
                                                                        

                                                                        Notes

                                                                        If the rule does not specify a border color, the border will have the color specified by the color property.

                                                                        Specifications

                                                                        Browser compatibility

                                                                        Browser Lowest Version
                                                                        Chrome 1.0
                                                                        Firefox 1
                                                                        Internet Explorer 4
                                                                        Netscape 4
                                                                        Opera 3.5

                                                                        Tags (2)

                                                                        Edit tags

                                                                        Attachments (0)

                                                                         

                                                                        Attach file

                                                                        Page last modified 02:04, 14 Apr 2011 by Yuichiro

                                                                        border-left-style - MDN

                                                                          Page last modified 06:04, 13 Apr 2011 by Yuichiro

                                                                          border-left-width - MDN

                                                                            Page last modified 03:33, 12 Apr 2011 by Yuichiro

                                                                            border-radius - MDN

                                                                              border-radius

                                                                              « CSS « CSS Reference

                                                                              Summary

                                                                              The border-radius CSS property can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

                                                                              border-radius is a shortcut to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

                                                                              Syntax

                                                                              border-radius:   <border-radius>{1,4} [ / <border-radius>{1,4}]?

                                                                              Values

                                                                              Accepts one, two, three or four <border-radius> values, optional followed by a slash / and a second set of values. <border-radius> represents one of:

                                                                              <length>
                                                                              See <length> for possible units.
                                                                              <percentage>
                                                                              Percentages for the horizontal radius are relative to the width of the border box, whereas percentages for the vertical radius are relative to the height of the border box.

                                                                              If one value is set, this radius applies to all 4 corners.
                                                                              If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
                                                                              Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
                                                                              Three values: The second value applies to top-right and also bottom-left.

                                                                              If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius.  If the slash is omitted, then the same values are used to set both horizontal and vertical radii.

                                                                              For example:

                                                                              border-radius: 1em/5em;
                                                                              
                                                                              /* is equivalent to */
                                                                              
                                                                              border-top-left-radius:     1em 5em;
                                                                              border-top-right-radius:    1em 5em;
                                                                              border-bottom-right-radius: 1em 5em;
                                                                              border-bottom-left-radius:  1em 5em;
                                                                              border-radius: 4px 3px 6px / 2px 4px;
                                                                              
                                                                              /* is equivalent to: */
                                                                              
                                                                              border-top-left-radius:     4px 2px;
                                                                              border-top-right-radius:    3px 4px;
                                                                              border-bottom-right-radius: 6px 2px;
                                                                              border-bottom-left-radius:  3px 4px;

                                                                              Examples

                                                                               border: solid 10px;
                                                                               
                                                                               /* the border will curve into a 'D' */
                                                                               border-radius: 0 50px 50px 0;
                                                                              
                                                                               border: groove 1em red;
                                                                               border-radius: 2em;
                                                                              
                                                                                background: gold;
                                                                                border: ridge gold;
                                                                                border-radius: 13em/3em;
                                                                              
                                                                                 background: gold;
                                                                                 border-radius: 40px 10px; 
                                                                              
                                                                              background: black;
                                                                              color: gray;
                                                                              border-radius: 50%;
                                                                              

                                                                              Notes

                                                                              • Dotted and dashed rounded border corners are rendered as solid in Gecko; see bug 382721 .
                                                                              • border-radius does not apply to table elements when border-collapse is collapse.
                                                                              • Old WebKit handles multiple values different, see below.

                                                                              Browser compatibility

                                                                              • Desktop
                                                                              • Mobile

                                                                              Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                              Basic support 4.0 (2.0)
                                                                              1.0 (1.7 or earlier) -moz
                                                                              4.0
                                                                              0.2 -webkit
                                                                              9.0 10.5 5.0
                                                                              3.0 -webkit
                                                                              Elliptical borders 3.5 (1.9.1) yes yes yes yes, but see below
                                                                              4 values for 4 corners yes 4.0 yes yes 5.0
                                                                              Percentages yes
                                                                              was Non-standard (see below)
                                                                              yes yes 11.5 5.1
                                                                              Feature iOS Safari Opera Mini Opera Mobile Android Browser
                                                                              Basic support 3.2 -webkit -- -- 2.1 -webkit
                                                                              Elliptical borders ? -- -- ?
                                                                              4 values for 4 corners ? -- -- ?
                                                                              Percentages ? -- -- ?

                                                                              <percentage> values

                                                                              • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
                                                                              • are buggy in Opera prior to 11.50
                                                                              • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.

                                                                              Notes

                                                                              Older Safari and Chrome versions (prior to WebKit 532.5)

                                                                              • support only one value for all 4 corners. For different radii the long form properties must be used
                                                                              • don't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners
                                                                                /* this is equivalent: */
                                                                                
                                                                                -webkit-border-radius: 40px 10px;
                                                                                        border-radius: 40px/10px;

                                                                              In Gecko 2.0 -moz-border-radius is renamed to border-radius. -moz-border-radius is supported as an alias for a transitional period (at least until the next version of Gecko). In order to conform to the CSS3 standard, Gecko 2.0

                                                                              • changes the handling of <percentage> values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
                                                                              • makes rounded corners clip content and images (if overflow: visible is not set)

                                                                              In Opera (prior to Opera 12), applying border-radius to replaced elements will not have rounded corners.

                                                                              Tags (2)

                                                                              Edit tags

                                                                              Attachments (0)

                                                                               

                                                                              Attach file

                                                                              Page last modified 08:31, 4 Oct 2011 by myakura

                                                                              border-right-color - MDN

                                                                                Page last modified 01:45, 13 Apr 2011 by Yuichiro

                                                                                border-right - MDN

                                                                                  border-right

                                                                                  « CSS « CSS Reference

                                                                                  Summary

                                                                                  The border-right is a shorthand property for setting the width, style and color of right border of a box. This property can be used to set the values for one or more of: border-right-width, border-right-style, border-right-color. Omitted values are set to their initial values.

                                                                                  Syntax

                                                                                  border-right: [border-width || border-style || border-color | inherit] ;
                                                                                  

                                                                                  Values

                                                                                  border-width
                                                                                  See border-width.
                                                                                  border-style 
                                                                                  See border-style.
                                                                                  border-color 
                                                                                  See border-color.

                                                                                  Examples

                                                                                  element { 
                                                                                      border-right: 1px solid #000;
                                                                                  }
                                                                                  

                                                                                  Notes

                                                                                  If the rule does not specify a border color, the border will have the color specified by the color property.

                                                                                  Specifications

                                                                                  Browser compatibility

                                                                                  Tags (2)

                                                                                  Edit tags

                                                                                  Attachments (0)

                                                                                   

                                                                                  Attach file

                                                                                  Page last modified 01:14, 14 Apr 2011 by Yuichiro

                                                                                  border-right-style - MDN

                                                                                    Page last modified 05:58, 13 Apr 2011 by Yuichiro

                                                                                    border-right-width - MDN

                                                                                      Page last modified 03:43, 12 Apr 2011 by Yuichiro

                                                                                      border-spacing - MDN

                                                                                        border-spacing

                                                                                        « CSS « CSS Reference

                                                                                        Summary

                                                                                        The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

                                                                                        • Initial value : 0
                                                                                          Note: In desktop browsers like Firefox the default value for HTML tables is 2px.
                                                                                        • Applies to: tables and inline-tables
                                                                                        • Inherited : Yes
                                                                                        • Percentages: n/a
                                                                                        • Media: visual
                                                                                        • Computed value : two absolute lengths

                                                                                        Syntax

                                                                                        border-spacing: <length> <length>? | inherit 

                                                                                        Values

                                                                                        Accepts one or two values.

                                                                                        <length>
                                                                                        A single value is for both horizontal and vertical border spacing. See <length> for possible units.
                                                                                        <length> <length>
                                                                                        The first <length> gives the horizontal spacing (space between cells in adjacent columns) and the second length gives the vertical spacing (space between cells in adjacent rows).

                                                                                        Examples

                                                                                        View Live Examples

                                                                                        table { border-spacing: 10px 5px; }
                                                                                        

                                                                                        Notes

                                                                                        • This property applies only when border-collapse is separate.
                                                                                        • The border-spacing is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

                                                                                        Browser compatibility

                                                                                        • Desktop
                                                                                        • Mobile

                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                        Basic support 1.0 1.0 (1.7 or earlier) 8.0 4.0 1.0 (85)
                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                        Basic support ? 1.0 (1.9.2) ? ? ?

                                                                                        Tags (2)

                                                                                        Edit tags

                                                                                        Attachments (0)

                                                                                         

                                                                                        Attach file

                                                                                        Page last modified 00:12, 9 Apr 2011 by grendel

                                                                                        border-style - MDN

                                                                                          border-style

                                                                                          « CSS « CSS Reference

                                                                                          Summary

                                                                                          The border-style CSS property is a shorthand property for setting the line style for all four sides of the elements border.

                                                                                          Syntax

                                                                                          border-style: [ <border-style> ]{1,4} | inherit
                                                                                          

                                                                                          Values

                                                                                          <border-style> 
                                                                                          The Border Style can be any of the following values.
                                                                                          • none : No border, sets width to 0. This is the default value.
                                                                                          • hidden : Same as 'none', except in terms of border conflict resolution for table elements.
                                                                                          • dashed : Series of short dashes or line segments.
                                                                                          • dotted : Series of dots.
                                                                                          • double : Two straight lines that add up to the pixel amount defined as border-width.
                                                                                          • groove : Carved effect.
                                                                                          • inset : Makes the box appear embedded.
                                                                                          • outset : Opposite of 'inset'. Makes the box appear 3D (embossed).
                                                                                          • ridge : Opposite of 'groove'. The border appears 3D (coming out).
                                                                                          • solid : Single, straight, solid line.

                                                                                          Up to four values can be given;
                                                                                          The first value sets all four borders.
                                                                                          The second sets the left and right.
                                                                                          The third sets the bottom.
                                                                                          The fourth sets the left.

                                                                                          Examples

                                                                                          View Live Examples

                                                                                          element { 
                                                                                            border-width: 1px;
                                                                                            border-style: solid;
                                                                                            border-color: black;
                                                                                          }
                                                                                          

                                                                                          Notes

                                                                                          The default value of border-style is none. This meant that if you change the border-width and the border-color you will not see the border unless you change this property to something other than none or hidden.

                                                                                          Browser compatibility

                                                                                          • Desktop
                                                                                          • Mobile

                                                                                          Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                          Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
                                                                                          Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                                          Basic support 1.0 (1.9.2) ? ? ? ?

                                                                                          Tags (2)

                                                                                          Edit tags

                                                                                          Attachments (0)

                                                                                           

                                                                                          Attach file

                                                                                          Page last modified 13:55, 13 Apr 2011 by Yuichiro

                                                                                          border-top-color - MDN

                                                                                            border-top-color

                                                                                            « CSS « CSS Reference

                                                                                            Summary

                                                                                            The border-top-color CSS property sets the color of the bottom border of an element. Note that in many cases the shortcut border-color is more convenient and preferable.

                                                                                            Syntax

                                                                                            border-top-color:  <color> | transparent | inherit

                                                                                            Values

                                                                                            <color>
                                                                                            See <color> values for the various possible keywords and numerical notations.
                                                                                            transparent
                                                                                            The element has no color of its own, instead showing the color of the element behind it.

                                                                                            Examples

                                                                                            View Live Examples

                                                                                            pre {
                                                                                                border: ridge 1em gold;
                                                                                                    border-top-color: red;
                                                                                            }
                                                                                            
                                                                                                 /* this has the same result:
                                                                                                    border: ridge 1em;
                                                                                                    border-color: red gold gold; */

                                                                                            Browser Compatibility

                                                                                            Browser Lowest Version
                                                                                            Chrome 1.0 
                                                                                            Firefox (Gecko) 1.0 (1.0)
                                                                                            Internet Explorer 4.0
                                                                                            Opera 3.5
                                                                                            Safari (WebKit) 1.0 (85)

                                                                                            Mozilla Extensions

                                                                                            -moz-border-top-colors sets the top border to multiple colors for Gecko based browsers like Firefox.

                                                                                            Tags (2)

                                                                                            Edit tags

                                                                                            Attachments (0)

                                                                                             

                                                                                            Attach file

                                                                                            Page last modified 01:38, 13 Apr 2011 by Yuichiro

                                                                                            border-top - MDN

                                                                                              border-top

                                                                                              « CSS « CSS Reference

                                                                                              Summary

                                                                                              The border-top is a shorthand property for setting the width, style and color of top border of a box. This property can be used to set the values for one or more of: border-top-width, border-top-style, border-top-color. Omitted values are set to their initial values.

                                                                                              Syntax

                                                                                              border-top: [border-width || border-style || border-color | inherit] ;
                                                                                              

                                                                                              Values

                                                                                              border-width
                                                                                              See border-width.
                                                                                              border-style 
                                                                                              See border-style.
                                                                                              border-color 
                                                                                              See border-color.

                                                                                              Examples

                                                                                              element { 
                                                                                                  border-top: 1px solid #000;
                                                                                              }
                                                                                              

                                                                                              Notes

                                                                                              If the rule does not specify a border color, the border will have the color specified by the color property.

                                                                                              Specifications

                                                                                              Browser compatibility

                                                                                              Tags (2)

                                                                                              Edit tags

                                                                                              Attachments (0)

                                                                                               

                                                                                              Attach file

                                                                                              Page last modified 01:05, 14 Apr 2011 by Yuichiro

                                                                                              border-top-left-radius - MDN

                                                                                                border-top-left-radius

                                                                                                « CSS « CSS Reference

                                                                                                Summary

                                                                                                The border-top-left-radius CSS property sets the rounding of the top-left corner of the element.

                                                                                                Previous to Gecko 2.0 (Firefox 4.0) it was named -moz-border-radius-topleft. This is supported as an alias for a short transitional period.

                                                                                                See border-radius for more information.

                                                                                                Syntax

                                                                                                -moz-border-radius-topleft:  <border-radius> <border-radius>?
                                                                                                border-top-left-radius:      <border-radius> <border-radius>? 
                                                                                                

                                                                                                Values

                                                                                                Accepts one <border-radius> value.
                                                                                                New in Firefox 3.5 An optional second value for elliptical corners. The two values define the radii of a quarter ellipse that defines the shape of the corner. The first value is the horizontal radius. The optional second value is the vertical radius, if omitted it's equal to the first.
                                                                                                <border-radius> represents one of:

                                                                                                <length>
                                                                                                See <length> for possible units.
                                                                                                <percentage>
                                                                                                Since Gecko 2.0 (Firefox 4.0): Percentages for the horizontal radius refer to the width of the box, whereas percentages for the vertical radius refer to the height of the box.
                                                                                                In previous Gecko/Firefox versions Non-standard : Relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height).

                                                                                                Examples

                                                                                                div { -moz-border-radius-topleft:  20px;  /* Firefox up to version 3.6 */
                                                                                                   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (before WebKit version 533) */
                                                                                                           border-top-left-radius: 20px;  /* Firefox 4; browsers with CSS3 support */
                                                                                                }
                                                                                                
                                                                                                /* elliptical corners supported since Firefox 3.5 (Gecko 1.9.1) */
                                                                                                  
                                                                                                div { -moz-border-radius-topleft:   20px;       /* round corner, fallback for Firefox 1-3.0 */
                                                                                                      -moz-border-radius-topleft:   20px 10px;  /* elliptical border, Firefox 3.5-3.6 */
                                                                                                    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (before WebKit version 532.5) */
                                                                                                            border-top-left-radius: 20px 10px;  /* Firefox 4; browsers with CSS3 support */
                                                                                                }

                                                                                                Browser compatibility

                                                                                                • Desktop
                                                                                                • Mobile

                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                Basic support

                                                                                                0.2

                                                                                                -webkit-border-top-left-radius
                                                                                                -webkit-border-top-right-radius
                                                                                                -webkit-border-bottom-right-radius
                                                                                                -webkit-border-bottom-left-radius

                                                                                                1.0 (1.0)

                                                                                                -moz-border-radius-topleft
                                                                                                -moz-border-radius-topright
                                                                                                -moz-border-radius-bottomright
                                                                                                -moz-border-radius-bottomleft

                                                                                                9.0

                                                                                                 

                                                                                                border-top-left-radius
                                                                                                border-top-right-radius
                                                                                                border-bottom-right-radius
                                                                                                border-bottom-left-radius
                                                                                                10.5 border-top-left-radius
                                                                                                border-top-right-radius
                                                                                                border-bottom-right-radius
                                                                                                border-bottom-left-radius
                                                                                                3.0 (522) -webkit-border-top-left-radius
                                                                                                -webkit-border-top-right-radius
                                                                                                -webkit-border-bottom-right-radius
                                                                                                -webkit-border-bottom-left-radius

                                                                                                4.0

                                                                                                 

                                                                                                border-top-left-radius
                                                                                                border-top-right-radius
                                                                                                border-bottom-right-radius
                                                                                                border-bottom-left-radius
                                                                                                4.0 (2.0) border-top-left-radius
                                                                                                border-top-right-radius
                                                                                                border-bottom-right-radius
                                                                                                border-bottom-left-radius
                                                                                                5.0 (532.5) border-top-left-radius
                                                                                                border-top-right-radius
                                                                                                border-bottom-right-radius
                                                                                                border-bottom-left-radius
                                                                                                Percentages 4.0 1.0 (1.0) Non-standard 9.0 10.5 5.0 (532.5)
                                                                                                4.0 (2.0)
                                                                                                Elliptical corners 0.2 3.5 (1.9.1) 9.0 10.5 3.0 (522 )
                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                Basic support ? ? ? ? ?

                                                                                                See also

                                                                                                border-radius

                                                                                                Tags (4)

                                                                                                Edit tags

                                                                                                Attachments (0)

                                                                                                 

                                                                                                Attach file

                                                                                                Page last modified 02:12, 15 Jun 2011 by grendel

                                                                                                border-top-right-radius - MDN

                                                                                                  border-top-right-radius

                                                                                                  Table of contents

                                                                                                  1. 1. Summary
                                                                                                  Table of contents
                                                                                                  1. 1. Summary

                                                                                                  « CSS « CSS Reference

                                                                                                  Summary

                                                                                                  The CSS property border-top-right-radius sets the rounding of the top-right corner of the border. Previous to Gecko 2.0 (Firefox 4.0) this was named -moz-border-radius-topright.

                                                                                                  See the border-top-left-radius and border-radius properties for more information.

                                                                                                  Tags (3)

                                                                                                  Edit tags

                                                                                                  Attachments (0)

                                                                                                   

                                                                                                  Attach file

                                                                                                  Page last modified 01:14, 12 Apr 2011 by Yuichiro

                                                                                                  border-top-style - MDN

                                                                                                    Page last modified 05:53, 13 Apr 2011 by Yuichiro

                                                                                                    border-top-width - MDN

                                                                                                      Page last modified 02:39, 12 Apr 2011 by Yuichiro

                                                                                                      border-width - MDN

                                                                                                        border-width

                                                                                                        « CSS « CSS Reference

                                                                                                        Summary

                                                                                                        The border-width CSS property sets the width of the border of a box. Using the shortcut property border is often more convenient.

                                                                                                        Syntax

                                                                                                         border-width:  <border-width> {1,4}
                                                                                                        

                                                                                                        Values

                                                                                                        Accepts one, two, three or four <border-width> values. These whitespace separated values set the width of the top, right, bottom, and left border of a box.

                                                                                                        If one value is set, this width applies to all 4 sides.
                                                                                                        If two values are set, the first applies to top and bottom, the second applies to the right and left side.
                                                                                                        Three values apply to the top, right and bottom side. The left side takes the second value.
                                                                                                        Four values apply to the top, right, bottom, left side in that order.

                                                                                                        <border-width>
                                                                                                        is one value or keyword of:   <length> | thin | medium | thick
                                                                                                        thin
                                                                                                        Depends on the UA. Typically 1px in desktop browsers like Firefox and IE 8. 2px in IE 4-7.
                                                                                                        medium
                                                                                                        Depends on the UA. Typically 3px in desktop browsers like Firefox and IE 8. 4px in IE 4-7.
                                                                                                        thick
                                                                                                        Depends on the UA. Typically 5px in desktop browsers like Firefox and IE 8. 6px in IE 4-7.
                                                                                                        <length>
                                                                                                        The border's thickness has an explicit value. Cannot be negative. See <length> for possible units.

                                                                                                        Examples

                                                                                                        border: ridge #ccc;
                                                                                                        border-width: 6px;  /* same as "border: ridge #ccc 6px";  6px wide border on all 4 sides */
                                                                                                        border: solid red;
                                                                                                        border-width: 2px 10px;  /* 2px wide top and bottom border, 10px right and left border */
                                                                                                        
                                                                                                        border: dotted orange;
                                                                                                        border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no border right and left */
                                                                                                        
                                                                                                        border: solid lightgreen;
                                                                                                        border-width: medium 0 1px thick;  /* three different width, no right border */
                                                                                                        

                                                                                                        Browser compatibility

                                                                                                        • Desktop
                                                                                                        • Mobile

                                                                                                        Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                        Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
                                                                                                        Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                                                        Basic support 1.0 (1.9.2) ? ? ? ?

                                                                                                        Tags (2)

                                                                                                        Edit tags

                                                                                                        Attachments (0)

                                                                                                         

                                                                                                        Attach file

                                                                                                        Page last modified 06:04, 12 Apr 2011 by Yuichiro

                                                                                                        bottom - MDN

                                                                                                          bottom

                                                                                                          « CSS « CSS Reference

                                                                                                          Summary

                                                                                                          The bottom property specifies part of the position of positioned elements.

                                                                                                          For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the bottom margin edge of the element and the bottom edge of its containing block.

                                                                                                          For relatively positioned elements (those with position: relative), it specifies the amount the element is moved above its normal position. However, the top property overrides the bottom property, so if top is not auto, the computed value of bottom is the negative of the computed value of top.

                                                                                                          Syntax

                                                                                                             bottom: <length> | <percentage> | auto | inherit
                                                                                                          

                                                                                                          Values

                                                                                                          <length> 
                                                                                                          A length, used as described in the summary. Can be negative, zero, or positive.
                                                                                                          <percentage> 
                                                                                                          A percentage of the containing block's height, used as described in the summary.
                                                                                                          auto 
                                                                                                          For absolutely positioned elements, position the element based on the top property and treat height: auto as a height based on the content. For relatively positioned elements, offset the element from its original position based on the top property, or if top is also auto, do not offset it at all.
                                                                                                          inherit 
                                                                                                          Inherits the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <length>, a <percentage>, or auto

                                                                                                          Examples

                                                                                                          element { 
                                                                                                              position: absolute;
                                                                                                              bottom: 20px; 
                                                                                                              height: 200px;
                                                                                                              border: 1px solid #000;
                                                                                                          }
                                                                                                          

                                                                                                          The following sample page contrasts position:absolute and position:fixed. When the regular text becomes taller than the viewable portion of the page (the browser window's viewport), blocks positioned with position:absolute will scroll with the page, while blocks positioned with position:fixed will not. Note that IE6 does not support position:fixed.

                                                                                                          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                                                                                                             "http://www.w3.org/TR/html4/strict.dtd">
                                                                                                          <html>
                                                                                                          <head>
                                                                                                          <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
                                                                                                          <title>Position at bottom, absolute or fixed</title>
                                                                                                          <style type="text/css">
                                                                                                          p {font-size:30px; line-height:3em;}
                                                                                                          div.pos {width:49%; text-align:center; border:2px solid #00f;}
                                                                                                          div#abs {position:absolute; bottom:0; left:0;}
                                                                                                          div#fix {position:fixed; bottom:0; right:0;}
                                                                                                          </style>
                                                                                                          </head>
                                                                                                          <body>
                                                                                                            <p>This<br>is<br>some<br>tall,<br>tall,
                                                                                                              <br>tall,<br>tall,<br>tall<br>content.</p>
                                                                                                            <div id="fix" class="pos"><p>Fixed</p></div>
                                                                                                            <div id="abs" class="pos"><p>Absolute</p></div>
                                                                                                          </body>
                                                                                                          </html>

                                                                                                          Notes

                                                                                                          For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element.

                                                                                                          For absolutely positioned elements, the bottom property has no visible effect when all of top, height, and margin-top are not auto (which is the default value for top and height).

                                                                                                          Specifications

                                                                                                          Browser Compatibility

                                                                                                          • Desktop
                                                                                                          • Mobile

                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                          Basic support 1.0 1.0 (1.7 or earlier) 5 6 1.0 (85)
                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                          Basic support ? 1.0 (1.9.2) ? ? ?

                                                                                                          See also

                                                                                                          position, top, right, left

                                                                                                          Tags (2)

                                                                                                          Edit tags

                                                                                                          Attachments (0)

                                                                                                           

                                                                                                          Attach file

                                                                                                          Page last modified 02:03, 9 Apr 2011 by grendel

                                                                                                          box-shadow - MDN

                                                                                                            box-shadow

                                                                                                            « CSS « CSS Reference

                                                                                                            Summary

                                                                                                            The box-shadow CSS property accepts one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

                                                                                                            Syntax

                                                                                                            box-shadow:  none | <shadow> [,<shadow>]*
                                                                                                            
                                                                                                              where <shadow> is defined as:
                                                                                                            
                                                                                                            inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

                                                                                                            Values

                                                                                                            inset (optional)
                                                                                                            If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
                                                                                                            The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn above background, but below border and content.
                                                                                                            <offset-x> <offset-y> (required)
                                                                                                            This are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See <length> for possible units.
                                                                                                            If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).
                                                                                                            <blur-radius> (optional)
                                                                                                            This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
                                                                                                            <spread-radius> (optional)
                                                                                                            This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
                                                                                                            <color> (optional)
                                                                                                            See <color> values for possible keywords and notations.
                                                                                                            If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the color property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <color> is omitted.

                                                                                                            Live examples

                                                                                                               -moz-box-shadow: 60px -16px teal;
                                                                                                            -webkit-box-shadow: 60px -16px teal;
                                                                                                                    box-shadow: 60px -16px teal;
                                                                                                            
                                                                                                               -moz-box-shadow: 10px 5px 5px black;
                                                                                                            -webkit-box-shadow: 10px 5px 5px black;
                                                                                                                    box-shadow: 10px 5px 5px black;
                                                                                                            
                                                                                                               -moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
                                                                                                            -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
                                                                                                                    box-shadow: 3px 3px red, -1em 0 0.4em olive;
                                                                                                            
                                                                                                               -moz-box-shadow: inset 5em 1em gold;
                                                                                                            -webkit-box-shadow: inset 5em 1em gold;
                                                                                                                    box-shadow: inset 5em 1em gold; 
                                                                                                            
                                                                                                               -moz-box-shadow: 0 0 1em gold;
                                                                                                            -webkit-box-shadow: 0 0 1em gold;
                                                                                                                    box-shadow: 0 0 1em gold; 
                                                                                                            
                                                                                                               -moz-box-shadow: inset 0 0 1em gold;
                                                                                                            -webkit-box-shadow: inset 0 0 1em gold;
                                                                                                                    box-shadow: inset 0 0 1em gold;
                                                                                                            

                                                                                                            Browser compatibility

                                                                                                            • Desktop
                                                                                                            • Mobile

                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                            Basic support 10.0
                                                                                                            1.0 -webkit
                                                                                                            4.0 (2.0)
                                                                                                            3.5 (1.9.1) -moz
                                                                                                            9.0 10.5 5.1 (WebKit 534)
                                                                                                            3.0 (WebKit 522) -webkit
                                                                                                            Multiple shadows 10.0
                                                                                                            1.0 -webkit
                                                                                                            4.0 (2.0)
                                                                                                            3.5 (1.9.1) -moz
                                                                                                            9.0 10.5 5.1 (WebKit 534)
                                                                                                            3.0 (WebKit 522) -webkit
                                                                                                            inset keyword 10.0
                                                                                                            4.0 -webkit
                                                                                                            4.0 (2.0)
                                                                                                            3.5 (1.9.1) -moz
                                                                                                            9.0 10.5 5.1 (WebKit 534)
                                                                                                            5.0 (WebKit 533) -webkit
                                                                                                            Spread radius 10.0
                                                                                                            4.0 -webkit
                                                                                                            4.0 (2.0)
                                                                                                            3.5 (1.9.1) -moz
                                                                                                            9.0 10.5 5.1 (WebKit 534)
                                                                                                            5.0 (WebKit 533) -webkit
                                                                                                            Feature iOS Safari Opera Mini Opera Mobile Android Browser
                                                                                                            Basic support ? ? ? ?
                                                                                                            Multiple shadows ? ? ? ?
                                                                                                            inset keyword ? ? ? ?
                                                                                                            Spread radius ? ? ? ?

                                                                                                            Notes

                                                                                                            • Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3).
                                                                                                            • Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a width of 100%, you'll see a scrollbar.

                                                                                                            Tags (5)

                                                                                                            Edit tags

                                                                                                            Attachments (0)

                                                                                                             

                                                                                                            Attach file

                                                                                                            Page last modified 11:52, 29 Sep 2011 by teoli

                                                                                                            box-sizing - MDN

                                                                                                              box-sizing

                                                                                                              « CSS « CSS Reference

                                                                                                              Summary

                                                                                                              The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. Mozilla browsers like Firefox support -moz-box-sizing.

                                                                                                              Syntax

                                                                                                              box-sizing:       content-box | border-box
                                                                                                              -moz-box-sizing:  content-box | border-box | padding-box 

                                                                                                              Values

                                                                                                              content-box
                                                                                                              This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.
                                                                                                              padding-box
                                                                                                              The width and height properties include the padding size, and do not include the border or margin. Non-standard padding-box isn't part of CSS3-UI and only supported by Firefox (Gecko).
                                                                                                              border-box
                                                                                                              The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is not in standards-compliant mode.

                                                                                                              Examples

                                                                                                              /* support Firefox, Safari/WebKit, Opera and IE8 */
                                                                                                              
                                                                                                              .example {
                                                                                                                 -moz-box-sizing:    border-box;
                                                                                                                 -webkit-box-sizing: border-box;
                                                                                                                  box-sizing:        border-box;
                                                                                                              }

                                                                                                              Notes

                                                                                                              See bug 243412 and its dependents:

                                                                                                              • -moz-box-sizing doesn't apply to table cells
                                                                                                              • min-height/max-height does not work for -moz-box-sizing: border-box

                                                                                                              Browser compatibility

                                                                                                              • Desktop
                                                                                                              • Mobile

                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                              Basic support 1.0
                                                                                                              -webkit-box-sizing
                                                                                                              box-sizing
                                                                                                              1.0 (1.0)
                                                                                                              -moz-box-sizing
                                                                                                              8.0
                                                                                                              box-sizing
                                                                                                              7.0
                                                                                                              box-sizing
                                                                                                              3.0 (522)
                                                                                                              -webkit-box-sizing
                                                                                                              box-sizing
                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                              Basic support ? ? ? ? ?

                                                                                                              See also

                                                                                                              CSS box model

                                                                                                              Tags (4)

                                                                                                              Edit tags

                                                                                                              Attachments (0)

                                                                                                               

                                                                                                              Attach file

                                                                                                              Page last modified 06:39, 29 Jul 2011 by grendel

                                                                                                              Mozilla Developer Network

                                                                                                              Mozilla Developer Network

                                                                                                              Join MDN | Log in

                                                                                                              It's the Web. You drive.

                                                                                                              Welcome to the Mozilla Developer Network.

                                                                                                              We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                                                              Browse Thousands of Docs for Web Developers

                                                                                                              And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                                                              Latest News & Updates

                                                                                                              • Mozilla Hacks Weekly, November 10th 2011

                                                                                                                We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                                                              • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                                                                Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                                                              • SDK Hack day: what to expect

                                                                                                                In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                                                              • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                                                                about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                                                              Awesome Demos

                                                                                                              More Demos…

                                                                                                              What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                                                              Mozilla Developer Network

                                                                                                              Mozilla Developer Network

                                                                                                              Join MDN | Log in

                                                                                                              It's the Web. You drive.

                                                                                                              Welcome to the Mozilla Developer Network.

                                                                                                              We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                                                              Browse Thousands of Docs for Web Developers

                                                                                                              And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                                                              Latest News & Updates

                                                                                                              • Mozilla Hacks Weekly, November 10th 2011

                                                                                                                We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                                                              • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                                                                Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                                                              • SDK Hack day: what to expect

                                                                                                                In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                                                              • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                                                                about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                                                              Awesome Demos

                                                                                                              More Demos…

                                                                                                              What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                                                              Mozilla Developer Network

                                                                                                              Mozilla Developer Network

                                                                                                              Join MDN | Log in

                                                                                                              It's the Web. You drive.

                                                                                                              Welcome to the Mozilla Developer Network.

                                                                                                              We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                                                              Browse Thousands of Docs for Web Developers

                                                                                                              And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                                                              Latest News & Updates

                                                                                                              • Mozilla Hacks Weekly, November 10th 2011

                                                                                                                We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                                                              • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                                                                Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                                                              • SDK Hack day: what to expect

                                                                                                                In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                                                              • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                                                                about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                                                              Awesome Demos

                                                                                                              More Demos…

                                                                                                              What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                                                              caption-side - MDN

                                                                                                                caption-side

                                                                                                                « CSS « CSS Reference

                                                                                                                Summary

                                                                                                                The caption-side property positions the content of table-caption at the specified side.

                                                                                                                Syntax

                                                                                                                caption-side: top | bottom | left | right | inherit
                                                                                                                

                                                                                                                Values

                                                                                                                top
                                                                                                                caption box will be above the table.
                                                                                                                bottom
                                                                                                                caption box will be below the table.
                                                                                                                left
                                                                                                                caption box will be on the left side of the table. This Value is dropped from CSS 2.1 but supported in Gecko (Firefox).
                                                                                                                right
                                                                                                                caption box will be on the right side of the table. This Value is dropped from CSS 2.1 but supported in Gecko (Firefox).

                                                                                                                Examples

                                                                                                                View Live Examples

                                                                                                                .contentbox table-caption {
                                                                                                                  caption-side: bottom;
                                                                                                                }
                                                                                                                

                                                                                                                Specifications

                                                                                                                Browser Compatibility

                                                                                                                • Desktop
                                                                                                                • Mobile

                                                                                                                Feature Chrome Firefox Internet Explorer Opera Safari
                                                                                                                Basic support 1.0 1.0 8.0 4.0 1.0
                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                Basic support ? ? ? ? ?

                                                                                                                Tags (3)

                                                                                                                Edit tags

                                                                                                                Attachments (0)

                                                                                                                 

                                                                                                                Attach file

                                                                                                                Page last modified 21:15, 26 Jul 2011 by pikkapika

                                                                                                                @charset - MDN

                                                                                                                  @charset

                                                                                                                  Summary

                                                                                                                  The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant.

                                                                                                                  This at-rule is useful when using non-ASCII characters in some CSS properties, like content.

                                                                                                                  As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) :

                                                                                                                  1. The value given by the charset attribute of the Content-Type: HTTP header or the equivalent in the protocol used to serve the style sheet.
                                                                                                                  2. The value of the Unicode byte-order character placed at the beginning of the file.
                                                                                                                  3. The @charset CSS at-rule.
                                                                                                                  4. Use the character encoding defined by the referring document: the charset attribute of the <link> element. This method is obsoleted in HTML5 and must not be used.
                                                                                                                  5. Assume that the document is UTF-8.

                                                                                                                  Syntax

                                                                                                                  @charset charset
                                                                                                                  

                                                                                                                  where :

                                                                                                                  charset
                                                                                                                  Is a <string> denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the IANA-registry. If several names are associated with an encoding, only the one marked with preferred must be used.

                                                                                                                  Examples

                                                                                                                  @charset "UTF-8"       // Set the encoding of the style sheet to Unicode UTF-8
                                                                                                                  @charset 'iso-8859-15' // Set the encoding of the style sheet to Latin-9 (Western European languages, with euro sign)
                                                                                                                   @charset "UTF-8"      // Invalid, there is a character before the at-rule
                                                                                                                  @charset UTF-8         // Invalid, without ' or ", the charset is not a CSS <string>
                                                                                                                  

                                                                                                                  Specifications

                                                                                                                  Specification Status Comment
                                                                                                                  CSS Level 2 (Revision 1) Recommendation  

                                                                                                                  Browser compatibility

                                                                                                                  • Desktop
                                                                                                                  • Mobile

                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                  Basic support 2.0 1.5 (1.8) [*] 5.5 [**] [1] 9 4
                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                  Basic support 2.1 1.0 (1.8) 5.5 [**] [2] 10.0 4

                                                                                                                  [*] Firefox 1.0 supported only an invalid syntax where the character encoding is not set between single or double quotes.
                                                                                                                  [**] From IE 5.5 to IE 7 included, IE also supported the invalid syntax where the character encoding is not set between single or double quotes.

                                                                                                                  See also

                                                                                                                  Tags (2)

                                                                                                                  Edit tags

                                                                                                                  Attachments (0)

                                                                                                                   

                                                                                                                  Attach file

                                                                                                                  Page last modified 18:59, 31 Oct 2011 by Sheppy

                                                                                                                  :checked - MDN

                                                                                                                    :checked

                                                                                                                    Table of contents

                                                                                                                      1. 1.1. Summary
                                                                                                                      2. 1.2. Syntax 
                                                                                                                      3. 1.3. Examples
                                                                                                                        1. 1.3.1. Example selectors
                                                                                                                      4. 1.4. Specifications
                                                                                                                    1. 2. Browser compatibility

                                                                                                                    « CSS « CSS Reference

                                                                                                                    Summary

                                                                                                                    The :checked pseudo-class selector represents any radio (<input type="radio">) or checkbox ( <option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

                                                                                                                    Syntax 

                                                                                                                    element:checked { style properties }

                                                                                                                    Examples

                                                                                                                    Example selectors

                                                                                                                    input[type="radio"]:checked
                                                                                                                    Represents all radio buttons on the page that are checked
                                                                                                                    input[type="checkbox"]:checked
                                                                                                                    Represents all checkboxes on the page that are checked

                                                                                                                    Specifications

                                                                                                                    Browser compatibility

                                                                                                                    • Desktop
                                                                                                                    • Mobile

                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                    Basic support ? 1.0 (1.7 or earlier) 9 9.0 ?
                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                    Tags (4)

                                                                                                                    Edit tags

                                                                                                                    Attachments (0)

                                                                                                                     

                                                                                                                    Attach file

                                                                                                                    Page last modified 12:22, 21 Sep 2011 by teoli

                                                                                                                    clear - MDN

                                                                                                                      clear

                                                                                                                      « CSS « CSS Reference

                                                                                                                      Summary

                                                                                                                      The clear property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

                                                                                                                      Syntax

                                                                                                                      clear: none | left | right | both | inherit
                                                                                                                      

                                                                                                                      Values

                                                                                                                      none
                                                                                                                      Element is not moved down to clear past floating elements.
                                                                                                                      left
                                                                                                                      Element is moved down to clear past left floats.
                                                                                                                      right
                                                                                                                      Element is moved down to clear past right floats.
                                                                                                                      both
                                                                                                                      Element is moved down to clear past both left and right floats.

                                                                                                                      Examples

                                                                                                                      View Live Examples

                                                                                                                      h1 { clear: none }
                                                                                                                      h2 { clear: right }

                                                                                                                      If you want an element to contain all floating elements inside it, you can either float the container as well, or use clear

                                                                                                                      #container:after { content: "."; line-height: 0; height: 0; display: block; visibility: hidden; clear: both; }
                                                                                                                      

                                                                                                                      Notes

                                                                                                                      The clear property applies to both floating and non-floating elements.

                                                                                                                      When it applies to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

                                                                                                                      When it applies to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

                                                                                                                      The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

                                                                                                                      Browser Compatibility

                                                                                                                      • Desktop
                                                                                                                      • Mobile

                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                      Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                      See also

                                                                                                                      Tags (3)

                                                                                                                      Edit tags

                                                                                                                      Attachments (0)

                                                                                                                       

                                                                                                                      Attach file

                                                                                                                      Page last modified 06:09, 9 Apr 2011 by grendel

                                                                                                                      clip - MDN

                                                                                                                        clip

                                                                                                                        « CSS « CSS Reference

                                                                                                                        Summary

                                                                                                                        The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

                                                                                                                        Syntax

                                                                                                                        clip:  
                                                                                                                        <shape>| auto | 
                                                                                                                        inherit
                                                                                                                        

                                                                                                                        Values

                                                                                                                        <shape>
                                                                                                                        A rectangular shape of the form
                                                                                                                        rect(<top>, <right>, <bottom>, <left>)   /* standard syntax */
                                                                                                                        
                                                                                                                        or
                                                                                                                        rect(<top> <right> <bottom> <left>)      /* backwards compatible syntax */
                                                                                                                        where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box.
                                                                                                                        <top>, <right>, <bottom>, and <left> may either have a <length> value or auto.
                                                                                                                        auto
                                                                                                                        The element does not clip (default value)

                                                                                                                        Examples

                                                                                                                        p     { border:dotted;  position:relative; }
                                                                                                                        
                                                                                                                        #img2 { position:absolute;  left:263px;
                                                                                                                        
                                                                                                                                clip: rect(40px, 200px, 150px, 30px); 
                                                                                                                                /* standard syntax, unsupported by Internet Explorer 4-7 */
                                                                                                                              }
                                                                                                                        
                                                                                                                        #img3 { position:absolute;  left:526px;
                                                                                                                        
                                                                                                                                clip: rect(40px  200px  150px  30px);
                                                                                                                                /* non-standard syntax, but supported by all major browsers including Firefox and IE */
                                                                                                                              }
                                                                                                                        

                                                                                                                        hut.jpg hut.jpg hut.jpg

                                                                                                                        Browser compatibility

                                                                                                                        • Desktop
                                                                                                                        • Mobile

                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                        Basic support 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
                                                                                                                        8.0
                                                                                                                        Correct comma syntax supported in this version.
                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                        See also

                                                                                                                        Tags (2)

                                                                                                                        Edit tags

                                                                                                                        Attachments (0)

                                                                                                                         

                                                                                                                        Attach file

                                                                                                                        Page last modified 09:45, 25 Oct 2011 by teoli

                                                                                                                        clip-path - MDN

                                                                                                                          clip-path

                                                                                                                          « CSS « CSS Reference

                                                                                                                          Summary

                                                                                                                           

                                                                                                                          Syntax

                                                                                                                          clip-path: <uri> | none | inherit
                                                                                                                          

                                                                                                                          Values

                                                                                                                           uri : <uri> | none | inherit

                                                                                                                           

                                                                                                                          Examples

                                                                                                                          .target { clip-path: url(#c1); }
                                                                                                                          
                                                                                                                          .anothertarget { clip-path: url(resources.svg#c1); }
                                                                                                                          

                                                                                                                          Browser compatibility

                                                                                                                          • Desktop
                                                                                                                          • Mobile

                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                          Basic support ? ? ? ? ?
                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                          Tags (4)

                                                                                                                          Edit tags

                                                                                                                          Attachments (0)

                                                                                                                           

                                                                                                                          Attach file

                                                                                                                          Page last modified 00:53, 12 Apr 2011 by Sheppy

                                                                                                                          color - MDN

                                                                                                                            color

                                                                                                                            « CSS « CSS Reference

                                                                                                                            Summary

                                                                                                                            The color CSS property sets the foreground color of an element's text content.

                                                                                                                            Syntax

                                                                                                                            color:  <color> | inherit

                                                                                                                            Values

                                                                                                                            <color>
                                                                                                                            The color property accepts various keywords and numeric notations. See <color> values for much details.

                                                                                                                            Examples

                                                                                                                            The following are all ways to make the element's text red:

                                                                                                                            element { color: red }
                                                                                                                            element { color: #f00 }
                                                                                                                            element { color: #ff0000 }
                                                                                                                            element { color: rgb(255,0,0) }
                                                                                                                            element { color: rgb(100%, 0%, 0%) }
                                                                                                                            element { color: hsl(0, 100%, 50%) }
                                                                                                                            
                                                                                                                            /* 50% translucent, support since Firefox 3 */
                                                                                                                            element { color: rgba(255, 0, 0, 0.5) } 
                                                                                                                            element { color: hsla(0, 100%, 50%, 0.5) }

                                                                                                                            Specifications

                                                                                                                            Browser compatibility

                                                                                                                            • Desktop
                                                                                                                            • Mobile

                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                            Basic support 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                            For the browser compatibility table for the various values, see <color>.

                                                                                                                            Tags (3)

                                                                                                                            Edit tags

                                                                                                                            Attachments (0)

                                                                                                                             

                                                                                                                            Attach file

                                                                                                                            Page last modified 15:51, 26 Aug 2011 by syssgx

                                                                                                                            column-count - MDN

                                                                                                                              column-count

                                                                                                                              Summary

                                                                                                                              The column-count CSS property describes the number of columns of the element.

                                                                                                                              Syntax

                                                                                                                              column-count: integer     or
                                                                                                                              column-count: auto
                                                                                                                              

                                                                                                                              where :

                                                                                                                              auto
                                                                                                                              Is a keyword indicating that the number of columns should be determined by other CSS properties, like column-width.
                                                                                                                              integer
                                                                                                                              Is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

                                                                                                                              Examples

                                                                                                                              .content-box {
                                                                                                                                border: 10px solid #000000;
                                                                                                                                column-count:3;
                                                                                                                              }
                                                                                                                              

                                                                                                                              Specifications

                                                                                                                              Specification Status Comment
                                                                                                                              CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                              Browser compatibility

                                                                                                                              • Desktop
                                                                                                                              • Mobile

                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                              Basic support (Supported) -webkit 1.5 (1.8) -moz 10 11.1 3.0 (522) -webkit
                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                              Basic support ? (Supported) ? ? ?

                                                                                                                              Tags (5)

                                                                                                                              Edit tags

                                                                                                                              Attachments (0)

                                                                                                                               

                                                                                                                              Attach file

                                                                                                                              Page last modified 09:30, 17 Oct 2011 by teoli

                                                                                                                              Mozilla Developer Network

                                                                                                                              Mozilla Developer Network

                                                                                                                              Join MDN | Log in

                                                                                                                              It's the Web. You drive.

                                                                                                                              Welcome to the Mozilla Developer Network.

                                                                                                                              We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                                                                              Browse Thousands of Docs for Web Developers

                                                                                                                              And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                                                                              Latest News & Updates

                                                                                                                              • Mozilla Hacks Weekly, November 10th 2011

                                                                                                                                We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                                                                              • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                                                                                Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                                                                              • SDK Hack day: what to expect

                                                                                                                                In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                                                                              • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                                                                                about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                                                                              Awesome Demos

                                                                                                                              More Demos…

                                                                                                                              What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                                                                              column-gap - MDN

                                                                                                                                column-gap

                                                                                                                                Summary

                                                                                                                                The column-gap CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element.

                                                                                                                                Syntax

                                                                                                                                column-gap: length     or
                                                                                                                                column-gap: normal
                                                                                                                                

                                                                                                                                where :

                                                                                                                                normal
                                                                                                                                Is a keyword indicating to use the browser-defined default spacing between columns. The specification, and most modern browsers follow it, recommends this keyword to be equal to a length of 1em.
                                                                                                                                length
                                                                                                                                Is a <length> value defining the size of the gap between columns. It must not be negative, but may be equal to 0.

                                                                                                                                Examples

                                                                                                                                .content-box {
                                                                                                                                  border: 10px solid #000000;
                                                                                                                                  column-count: 3;
                                                                                                                                  column-gap: 20px;
                                                                                                                                }
                                                                                                                                

                                                                                                                                Specifications

                                                                                                                                Specification Status Comment
                                                                                                                                CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                                Browser compatibility

                                                                                                                                • Desktop
                                                                                                                                • Mobile

                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                Basic support (Supported) -webkit 1.5 (1.8) -moz [*] 10 11.1 3.0 (522) -webkit
                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                Basic support ? (Supported) ? ? ?

                                                                                                                                [*] Before Firefox 3 (Gecko 1.9), the default value associated to the normal keyword was 0 and not 1em.

                                                                                                                                Tags (4)

                                                                                                                                Edit tags

                                                                                                                                Attachments (0)

                                                                                                                                 

                                                                                                                                Attach file

                                                                                                                                Page last modified 20:44, 4 Nov 2011 by plapier

                                                                                                                                column-rule-color - MDN

                                                                                                                                  column-rule-color

                                                                                                                                  Summary

                                                                                                                                  The column-rule-color CSS property lets you set the color of the rule drawn between columns in multi-column layouts.

                                                                                                                                  Syntax

                                                                                                                                  column-rule-color:  <color>
                                                                                                                                  

                                                                                                                                  Values

                                                                                                                                  <color> 
                                                                                                                                  See <color> values.

                                                                                                                                  Example

                                                                                                                                  #header {column-rule-color:  blue;}
                                                                                                                                  

                                                                                                                                  Specifications

                                                                                                                                  Specification Status Comment
                                                                                                                                  CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                                  Browser compatibility

                                                                                                                                  • Desktop
                                                                                                                                  • Mobile

                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                  Basic support (Supported) -webkit 3.5 (1.9.1) -moz 10 11.1 3.0 (522) -webkit
                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                  Basic support ? (Supported) ? ? ?

                                                                                                                                   

                                                                                                                                  Tags (5)

                                                                                                                                  Edit tags

                                                                                                                                  Attachments (0)

                                                                                                                                   

                                                                                                                                  Attach file

                                                                                                                                  Page last modified 12:39, 17 Oct 2011 by teoli

                                                                                                                                  column-rule - MDN

                                                                                                                                    column-rule

                                                                                                                                    Summary

                                                                                                                                    In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.

                                                                                                                                    Syntax

                                                                                                                                    column-rule:  <border-width> || <border-style> || <color>
                                                                                                                                    

                                                                                                                                    Values

                                                                                                                                    Accepts one, two or three values in any order:

                                                                                                                                    <border-width>
                                                                                                                                    Optional, is one value or keyword of:  <length> | thin | medium | thick
                                                                                                                                    Default value medium is used if absent. See border-width for details.
                                                                                                                                    <border-style>
                                                                                                                                    Required, default value none is used if absent. See border-style for possible values and details.
                                                                                                                                    <color>
                                                                                                                                    Optional, see <color> value. Default value if absent: currentColor, the value of the element's color property (foreground color).

                                                                                                                                    Examples

                                                                                                                                    p.foo { column-rule: dotted; }          /* same as "medium dotted currentColor" */
                                                                                                                                    p.bar { column-rule: solid blue; }      /* same as "medium solid blue" */
                                                                                                                                    p.baz { column-rule: solid 8px; }       /* same as "8px solid currentColor" */
                                                                                                                                    p.abc { column-rule: thick inset blue; }
                                                                                                                                    

                                                                                                                                    Live Example

                                                                                                                                    padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

                                                                                                                                    Specifications

                                                                                                                                    Specification Status Comment
                                                                                                                                    CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                                    Browser compatibility

                                                                                                                                    • Desktop
                                                                                                                                    • Mobile

                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                    Basic support (Supported) -webkit 3.5 (1.9.1) -moz 10 11.1 3.0 (522) -webkit
                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                    Basic support ? (Supported) ? ? ?

                                                                                                                                     

                                                                                                                                    Tags (5)

                                                                                                                                    Edit tags

                                                                                                                                    Attachments (0)

                                                                                                                                     

                                                                                                                                    Attach file

                                                                                                                                    Page last modified 10:54, 17 Oct 2011 by teoli

                                                                                                                                    column-rule-style - MDN

                                                                                                                                      column-rule-style

                                                                                                                                      Summary

                                                                                                                                      The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts.

                                                                                                                                      Syntax

                                                                                                                                      column-rule-style:  <border-style>
                                                                                                                                      

                                                                                                                                      Values

                                                                                                                                      <border-style> 
                                                                                                                                      See border-style

                                                                                                                                      Example

                                                                                                                                      #header {-moz-column-rule-style: inset;}
                                                                                                                                      

                                                                                                                                      Specifications

                                                                                                                                      Specification Status Comment
                                                                                                                                      CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                                      Browser compatibility

                                                                                                                                      • Desktop
                                                                                                                                      • Mobile

                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                      Basic support (Supported) -webkit 3.5 (1.9.1) -moz 10 11.1 3.0 (522) -webkit
                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                      Basic support ? (Supported) ? ? ?

                                                                                                                                       

                                                                                                                                      Tags (5)

                                                                                                                                      Edit tags

                                                                                                                                      Attachments (0)

                                                                                                                                       

                                                                                                                                      Attach file

                                                                                                                                      Page last modified 11:53, 17 Oct 2011 by teoli

                                                                                                                                      column-rule-width - MDN

                                                                                                                                        column-rule-width

                                                                                                                                        Summary

                                                                                                                                        The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.

                                                                                                                                        Syntax

                                                                                                                                        column-rule-width:  <border-width>
                                                                                                                                        

                                                                                                                                        Values

                                                                                                                                        <border-width> 
                                                                                                                                        See border-width.

                                                                                                                                        Example

                                                                                                                                        #header {column-rule-width: thick;}
                                                                                                                                        

                                                                                                                                        Specifications

                                                                                                                                        Specification Status Comment
                                                                                                                                        CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                                        Browser compatibility

                                                                                                                                        • Desktop
                                                                                                                                        • Mobile

                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                        Basic support (Supported) -webkit 3.5 (1.9.1) -moz 10 11.1 3.0 (522) -webkit
                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                        Basic support ? (Supported) ? ? ?

                                                                                                                                         

                                                                                                                                        Tags (5)

                                                                                                                                        Edit tags

                                                                                                                                        Attachments (0)

                                                                                                                                         

                                                                                                                                        Attach file

                                                                                                                                        Page last modified 11:24, 17 Oct 2011 by teoli

                                                                                                                                        columns - MDN

                                                                                                                                          columns

                                                                                                                                          Summary

                                                                                                                                          The columns CSS property is a shorthand property allowing to set both the column-width and the column-count properties at the same time.

                                                                                                                                          Syntax

                                                                                                                                          columns: <column-count> || <column-width>
                                                                                                                                          

                                                                                                                                          where :

                                                                                                                                          <column-width>
                                                                                                                                          Is a <length> value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.
                                                                                                                                          <column-count>
                                                                                                                                          Is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

                                                                                                                                          Examples

                                                                                                                                          .content-box {
                                                                                                                                            border: 10px solid #000000;
                                                                                                                                            columns:3;
                                                                                                                                          }
                                                                                                                                          

                                                                                                                                          Specifications

                                                                                                                                          Specification Status Comment
                                                                                                                                          CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                                          Browser compatibility

                                                                                                                                          • Desktop
                                                                                                                                          • Mobile

                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                          Basic support (Supported) -webkit 9 (9) -moz 10 11.1 3.0 (522) -webkit
                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                          Basic support ? (Supported) ? ? ?

                                                                                                                                          Tags (4)

                                                                                                                                          Edit tags

                                                                                                                                          Attachments (0)

                                                                                                                                           

                                                                                                                                          Attach file

                                                                                                                                          Page last modified 07:22, 26 Oct 2011 by teoli

                                                                                                                                          Mozilla Developer Network

                                                                                                                                          Mozilla Developer Network

                                                                                                                                          Join MDN | Log in

                                                                                                                                          It's the Web. You drive.

                                                                                                                                          Welcome to the Mozilla Developer Network.

                                                                                                                                          We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                                                                                          Browse Thousands of Docs for Web Developers

                                                                                                                                          And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                                                                                          Latest News & Updates

                                                                                                                                          • Mozilla Hacks Weekly, November 10th 2011

                                                                                                                                            We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                                                                                          • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                                                                                            Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                                                                                          • SDK Hack day: what to expect

                                                                                                                                            In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                                                                                          • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                                                                                            about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                                                                                          Awesome Demos

                                                                                                                                          More Demos…

                                                                                                                                          What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                                                                                          column-width - MDN

                                                                                                                                            column-width

                                                                                                                                            Summary

                                                                                                                                            The column-width CSS property suggests an optimal column width. It can be let to the decision of the browser or a length can be suggested.

                                                                                                                                            Syntax

                                                                                                                                            column-width: length        or
                                                                                                                                            column-width: auto 
                                                                                                                                            

                                                                                                                                            where :

                                                                                                                                            length
                                                                                                                                            Is a <length> value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.
                                                                                                                                            auto
                                                                                                                                            Is a keyword indicating that the width of the column should be determined by other CSS properties, like column-count.

                                                                                                                                            Examples

                                                                                                                                            .content-box {
                                                                                                                                              border: 10px solid #000000;
                                                                                                                                              column-width: 300px;
                                                                                                                                            }
                                                                                                                                            

                                                                                                                                            Specifications

                                                                                                                                            Specification Status Comment
                                                                                                                                            CSS Writing Modes Module Level 3 Working Draft Adds intrinsic sizes via the keywords min-content, max-content, fill-available and fit-content.
                                                                                                                                            CSS Multi-column Layout Module Level 3 Candidate Recommandation  

                                                                                                                                            Browser compatibility

                                                                                                                                            • Desktop
                                                                                                                                            • Mobile

                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                            Basic support (Supported) -webkit 1.5 (1.8) -moz 10 11.1 3.0 (522) -webkit
                                                                                                                                            Intrinsic sizes -- -- -- -- --
                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                            Basic support ? (Supported) ? ? ?
                                                                                                                                            Intrinsic sizes -- -- -- -- --

                                                                                                                                            Tags (5)

                                                                                                                                            Edit tags

                                                                                                                                            Attachments (0)

                                                                                                                                             

                                                                                                                                            Attach file

                                                                                                                                            Page last modified 06:57, 23 Oct 2011 by teoli

                                                                                                                                            Comments - MDN

                                                                                                                                              Comments

                                                                                                                                              Table of contents

                                                                                                                                              1. 1. Summary
                                                                                                                                              2. 2. Syntax
                                                                                                                                              3. 3. Examples
                                                                                                                                              4. 4. Notes
                                                                                                                                              5. 5. Specifications
                                                                                                                                              Table of contents
                                                                                                                                              1. 1. Summary
                                                                                                                                              2. 2. Syntax
                                                                                                                                              3. 3. Examples
                                                                                                                                              4. 4. Notes
                                                                                                                                              5. 5. Specifications

                                                                                                                                              « CSS « CSS Reference

                                                                                                                                              Summary

                                                                                                                                              Comments are used to add explanatory notes or prevent the browser from interpreting parts of the stylesheet.

                                                                                                                                              Syntax

                                                                                                                                              /* Comment */

                                                                                                                                              Examples

                                                                                                                                              /* A single line comment */
                                                                                                                                              
                                                                                                                                              /*
                                                                                                                                              A comment
                                                                                                                                              which stretches
                                                                                                                                              over several
                                                                                                                                              lines
                                                                                                                                              */

                                                                                                                                              Notes

                                                                                                                                              The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external stylesheets. However, when using the <style> element, you may use <!-- --> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the /* */ comment syntax, comments cannot be nested. In other words, the first instance of */ that follows an instance of /* closes the comment.

                                                                                                                                              Tags (2)

                                                                                                                                              Edit tags

                                                                                                                                              Attachments (0)

                                                                                                                                               

                                                                                                                                              Attach file

                                                                                                                                              Page last modified 04:13, 9 Apr 2011 by jswisher

                                                                                                                                              content - MDN

                                                                                                                                                content

                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                Summary

                                                                                                                                                The content CSS property is used with the :before and :after pseudo-elements to generate content in an element.

                                                                                                                                                • Initial value : normal
                                                                                                                                                • Applies to: pseudo-elements :before and :after
                                                                                                                                                • Inherited : no
                                                                                                                                                • Media: all
                                                                                                                                                • Computed value :
                                                                                                                                                  • on :before and :after, normal computes to none
                                                                                                                                                  • on elements, always computes to normal
                                                                                                                                                  • for URI values, the absolute URI
                                                                                                                                                  • for attr() values, the resulting string
                                                                                                                                                  • for other keywords, as specified.

                                                                                                                                                Syntax

                                                                                                                                                content: normal | none | 
                                                                                                                                                       [ <string> | <uri> | <counter> | attr() | 
                                                                                                                                                         open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

                                                                                                                                                Values

                                                                                                                                                none
                                                                                                                                                The pseudo-element is not generated.
                                                                                                                                                normal
                                                                                                                                                Computes to none for the :before and :after pseudo-elements.
                                                                                                                                                <string>
                                                                                                                                                Text content.
                                                                                                                                                <uri> url()
                                                                                                                                                The value is a URI that designates an external resource (such as an image). If the resource or image can't be displayed, it is either ignored or some placeholder shows up.
                                                                                                                                                <counter>
                                                                                                                                                [fixme] Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.
                                                                                                                                                attr(X)
                                                                                                                                                Returns the value of the element's attribute X as a string. If there is no attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.
                                                                                                                                                open-quote | close-quote
                                                                                                                                                These values are replaced by the appropriate string from the quotes property.
                                                                                                                                                no-open-quote | no-close-quote
                                                                                                                                                Introduces no content, but increments (decrements) the level of nesting for quotes.

                                                                                                                                                Examples

                                                                                                                                                 q:lang(en) { quotes: '"' '"' "'" "'" }
                                                                                                                                                 q:before   { content: open-quote }
                                                                                                                                                 q:after    { content: close-quote }
                                                                                                                                                 h1:before  { content: "Chapter: "; }
                                                                                                                                                           /* content accepts multiple values */
                                                                                                                                                
                                                                                                                                                 a:before   { content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; 
                                                                                                                                                              font:    x-small Arial,freeSans,sans-serif;
                                                                                                                                                              color:   gray;
                                                                                                                                                            }
                                                                                                                                                

                                                                                                                                                View on jsFiddle

                                                                                                                                                Browser compatibility

                                                                                                                                                • Desktop
                                                                                                                                                • Mobile

                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                Basic support 1.0 1.0 (1.0) 8.0 4.0 1.0 (85)
                                                                                                                                                url() support 1.0 1.0 (1.0) 8.0 7.0 1.0 (85)
                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                Basic support ? ? ? ? ?

                                                                                                                                                See also

                                                                                                                                                :after, :before, quotes

                                                                                                                                                Tags (6)

                                                                                                                                                Edit tags

                                                                                                                                                Attachments (0)

                                                                                                                                                 

                                                                                                                                                Attach file

                                                                                                                                                Page last modified 08:27, 9 Nov 2011 by myakura

                                                                                                                                                counter-increment - MDN

                                                                                                                                                  counter-increment

                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                  Summary

                                                                                                                                                  counter-increment is used to increase the value of CSS Counters by a given value.

                                                                                                                                                  Syntax

                                                                                                                                                  counter-increment: [<identifier> <integer>?]+ | inherit | none
                                                                                                                                                  

                                                                                                                                                  Values

                                                                                                                                                  identifier
                                                                                                                                                  The name of the counter to increment.
                                                                                                                                                  integer
                                                                                                                                                  The value to add to the counter. Defaults to 1 if not given.

                                                                                                                                                  You may specify as many counters to increment as you want, each separated by a space.

                                                                                                                                                  Related properties

                                                                                                                                                  Examples

                                                                                                                                                  h1 {
                                                                                                                                                    counter-increment: chapter section 2 page;
                                                                                                                                                    /* Increases the value of the chapter and page counters by 1
                                                                                                                                                       and the section counter by 2. */
                                                                                                                                                  }
                                                                                                                                                  

                                                                                                                                                  Notes

                                                                                                                                                  Specifications

                                                                                                                                                  Browser compatibility

                                                                                                                                                  • Desktop
                                                                                                                                                  • Mobile

                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                  Basic support 2.0 1.0 (?) 8.0 9.2 3.0 (?)
                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                  Basic support ? ? ? ? ?

                                                                                                                                                  Tags (3)

                                                                                                                                                  Edit tags

                                                                                                                                                  Attachments (0)

                                                                                                                                                   

                                                                                                                                                  Attach file

                                                                                                                                                  Page last modified 15:31, 27 Sep 2011 by teoli

                                                                                                                                                  counter-reset - MDN

                                                                                                                                                    counter-reset

                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                    Summary

                                                                                                                                                    counter-reset is used to reset CSS Counters to a given value.

                                                                                                                                                    Syntax

                                                                                                                                                    counter-reset: [<identifier> <integer>?]+ | inherit | none
                                                                                                                                                    

                                                                                                                                                    Values

                                                                                                                                                    identifier
                                                                                                                                                    The name of the counter to reset.
                                                                                                                                                    integer
                                                                                                                                                    The value to reset the counter to on each occurrence of the element. Defaults to 0 if not given.

                                                                                                                                                    You may specify as many counters to reset as you want, each separated by a space.

                                                                                                                                                    Related properties

                                                                                                                                                    Examples

                                                                                                                                                    h1 {
                                                                                                                                                      counter-reset: chapter section 1 page;
                                                                                                                                                      /* Sets the chapter and page counters to 0
                                                                                                                                                         and the section counter to 1. */
                                                                                                                                                    }
                                                                                                                                                    

                                                                                                                                                    Notes

                                                                                                                                                    Specifications

                                                                                                                                                    Browser compatibility

                                                                                                                                                    • Desktop
                                                                                                                                                    • Mobile

                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                    Basic support 2.0 1.0 (?) 8.0 9.2 3.1 (?)
                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                    Tags (4)

                                                                                                                                                    Edit tags

                                                                                                                                                    Attachments (0)

                                                                                                                                                     

                                                                                                                                                    Attach file

                                                                                                                                                    Page last modified 15:29, 27 Sep 2011 by teoli

                                                                                                                                                    CSS cursor - MDN

                                                                                                                                                      CSS cursor

                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                      Summary

                                                                                                                                                      The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

                                                                                                                                                      Syntax

                                                                                                                                                      CSS 2.1
                                                                                                                                                      
                                                                                                                                                      cursor:
                                                                                                                                                      [ [ 
                                                                                                                                                      <uri> ,]* 
                                                                                                                                                        [ auto | crosshair | default | help | move | pointer  | progress | text | wait | e-resize | 
                                                                                                                                                          ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize ] ]
                                                                                                                                                      ] | inherit
                                                                                                                                                      
                                                                                                                                                      CSS 3
                                                                                                                                                      
                                                                                                                                                      cursor:
                                                                                                                                                      [ [ 
                                                                                                                                                      <uri> [<x> <y>]?,]* 
                                                                                                                                                        [ auto | default | none | context-menu | help | pointer | progress | wait | cell | 
                                                                                                                                                          crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 
                                                                                                                                                          e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize |
                                                                                                                                                          sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize |
                                                                                                                                                          col-resize | row-resize | all-scroll ]
                                                                                                                                                      ] | inherit
                                                                                                                                                      

                                                                                                                                                      Values

                                                                                                                                                      <uri>
                                                                                                                                                      Optional.
                                                                                                                                                      A url(…) or a comma separated list url(…), url(…), … , pointing to an image file. More than one <uri> may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
                                                                                                                                                      <x> <y>
                                                                                                                                                      Optional x- and y-coordinates (not supported by Internet Explorer). Two unit-less numbers.

                                                                                                                                                      Supported CSS standard values

                                                                                                                                                      Category CSS value
                                                                                                                                                      move mouse
                                                                                                                                                      over for testing
                                                                                                                                                        Description
                                                                                                                                                      General auto   The browser determines the cursor to display based on the current context.
                                                                                                                                                      E.g. equivalent to text when hovering text.
                                                                                                                                                      default default.gif Default cursor, typically an arrow.
                                                                                                                                                      none   No cursor is rendered New in Firefox 3
                                                                                                                                                      Links & status context-menu context-menu.png A context menu is available under the cursor.
                                                                                                                                                      In Gecko/Firefox not implemented on Windows, bug 258960 WONTFIX.
                                                                                                                                                      help help.gif Indicating help is available.
                                                                                                                                                      pointer pointer.gif E.g. used when hovering over links, typically a hand.
                                                                                                                                                      progress progress.gif The program is busy in the background but the user can still interact with the interface (unlike for wait).
                                                                                                                                                      wait wait.gif The program is busy (sometimes an hourglass or a watch).
                                                                                                                                                      Selection cell cell.gif Indicating that cells can be selected.
                                                                                                                                                      crosshair crosshair.gif Cross cursor, often used to indicate selection in a bitmap.
                                                                                                                                                      text text.gif Indicating text can be selected, typically an I-beam.
                                                                                                                                                      vertical-text vertical-text.gif Indicating that vertical text can be selected, typically a sideways I-beam.
                                                                                                                                                      Drag and drop alias alias.gif Indicating an alias or shortcut is to be created.
                                                                                                                                                      copy copy.gif Indicating that something can be copied.
                                                                                                                                                      move move.gif The hovered object may be moved.
                                                                                                                                                      no-drop no-drop.gifCursor showing that a drop is not allowed at the current location.
                                                                                                                                                      bug 275173 on Windows, "no-drop is the same as not-allowed".
                                                                                                                                                      not-allowed not-allowed.gif Cursor showing that something cannot be done.
                                                                                                                                                      Resize & scrolling all-scroll all-scroll.gif Cursor showing that something can be scrolled in any direction (panned).
                                                                                                                                                      bug 275174 on Windows, "all-scroll is the same as move".
                                                                                                                                                      col-resize col-resize.gif The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
                                                                                                                                                      row-resize row-resize.gif The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
                                                                                                                                                      n-resize n-resize.gif Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
                                                                                                                                                      e-resize e-resize.gif
                                                                                                                                                      s-resize s-resize.gif
                                                                                                                                                      w-resize w-resize.gif
                                                                                                                                                      ne-resize ne-resize.gif
                                                                                                                                                      nw-resize nw-resize.gif
                                                                                                                                                      se-resize se-resize.gif
                                                                                                                                                      sw-resize sw-resize.gif
                                                                                                                                                      ew-resize   Indicates a bidirectional resize cursor.
                                                                                                                                                      ns-resize  
                                                                                                                                                      nesw-resize  
                                                                                                                                                      nwse-resize  

                                                                                                                                                      Mozilla extensions

                                                                                                                                                      CSS value Description dropped deprecated since
                                                                                                                                                      -moz-cell Obsolete, use cell. Gecko 1.9.2 (Firefox 3.6) Gecko 1.8 (Firefox 1.5)
                                                                                                                                                      -moz-alias Obsolete, use alias. Gecko 2 (Firefox 4)
                                                                                                                                                      -moz-context-menu Obsolete, use context-menu.
                                                                                                                                                      -moz-copy Obsolete, use copy.
                                                                                                                                                      -moz-spinning Obsolete, use progress. Gecko 1.7.1 (Firefox 1.0)
                                                                                                                                                      -moz-grab grab.gif  An element can be grabbed.

                                                                                                                                                      This cursors are not recommended for use on public web pages.

                                                                                                                                                      Use of custom image cursors may provide better cross browser compatibility.

                                                                                                                                                      -moz-grabbing grabbing.gif  An element is currently being grabbed.
                                                                                                                                                      -moz-zoom-in zoom-in.gif  An element is actually being resized, enlarged or is actually being magnified. bug 204841
                                                                                                                                                      -moz-zoom-out zoom-out.gif  An element is actually being resized, reduced or is actually being zoomed out. bug 204841

                                                                                                                                                      Notes

                                                                                                                                                      Gecko 2.0 note
                                                                                                                                                      (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                      Support for loading a cursor from a URI was added for Mac OS X in Gecko 2.0; prior to that it was not supported on OS X.

                                                                                                                                                      Examples

                                                                                                                                                      .foo { cursor: crosshair; }
                                                                                                                                                      
                                                                                                                                                      .bar { cursor: move;  cursor: cell; }  /* use move if cell isn't supported */ 
                                                                                                                                                      
                                                                                                                                                      .baz { url(hyper.cur), auto }  /* standard cursor value as fallback must be provided */
                                                                                                                                                      

                                                                                                                                                      Browser compatibility

                                                                                                                                                      • Desktop
                                                                                                                                                      • Mobile

                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                      auto | crosshair | default | move | text | wait | help | n-resize | e-resize | s-resize |w-resize | ne-resize | nw-resize | se-resize | sw-resize  1.0  1.0 (1.0)  4.0  7.0 1.2 (125)
                                                                                                                                                       hand Non-standard (use pointer)  --
                                                                                                                                                       --
                                                                                                                                                       4.0  7.0 -- 
                                                                                                                                                       pointer  1.0  1.0 (1.0)  6.0  7.0  1.2 (125)
                                                                                                                                                       progress  1.0  1.0 (1.7.1)  6.0  7.2  3.0 (522)
                                                                                                                                                      url()
                                                                                                                                                      See Using URL values
                                                                                                                                                       1.0  1.5 (1.8)  6.0  --
                                                                                                                                                       3.0 (522-523)
                                                                                                                                                      not-allowed | no-drop | vertical-text | all-scroll | col-resize | row-resize  1.0  1.5 (1.8) --
                                                                                                                                                       --
                                                                                                                                                       3.0 (522)
                                                                                                                                                      none  5.0  3.0 (1.9) --
                                                                                                                                                       --
                                                                                                                                                       5.0 (533)
                                                                                                                                                      inherit 1.0 1.0 8.0 9.0 1.2
                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                      See also

                                                                                                                                                      Tags (4)

                                                                                                                                                      Edit tags

                                                                                                                                                      Attachments (30)

                                                                                                                                                      FileSizeDateAttached by 
                                                                                                                                                      alias.gif
                                                                                                                                                      No description
                                                                                                                                                      176 bytes20:30, 26 Apr 2009Jürgen JekaActions
                                                                                                                                                       all-scroll.gif
                                                                                                                                                      No description
                                                                                                                                                      98 bytes16:00, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       cell.gif
                                                                                                                                                      No description
                                                                                                                                                      98 bytes16:00, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                      col-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      106 bytes23:04, 27 Apr 2009Jürgen JekaActions
                                                                                                                                                      context-menu.png
                                                                                                                                                      No description
                                                                                                                                                      233 bytes19:59, 25 Apr 2009Jürgen JekaActions
                                                                                                                                                      copy.gif
                                                                                                                                                      No description
                                                                                                                                                      173 bytes20:03, 25 Apr 2009Jürgen JekaActions
                                                                                                                                                       crosshair.gif
                                                                                                                                                      No description
                                                                                                                                                      86 bytes16:01, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       default.gif
                                                                                                                                                      No description
                                                                                                                                                      98 bytes16:01, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       e-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      88 bytes16:01, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       grab.gif
                                                                                                                                                      No description
                                                                                                                                                      103 bytes16:01, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       grabbing.gif
                                                                                                                                                      No description
                                                                                                                                                      91 bytes16:02, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       help.gif
                                                                                                                                                      No description
                                                                                                                                                      119 bytes16:02, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                      move.gif
                                                                                                                                                      No description
                                                                                                                                                      103 bytes20:01, 25 Apr 2009Jürgen JekaActions
                                                                                                                                                       n-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      95 bytes16:03, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       ne-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      99 bytes16:03, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                      no-drop.gif
                                                                                                                                                      No description
                                                                                                                                                      141 bytes20:05, 25 Apr 2009Jürgen JekaActions
                                                                                                                                                      not-allowed.gif
                                                                                                                                                      No description
                                                                                                                                                      185 bytes20:17, 25 Apr 2009Jürgen JekaActions
                                                                                                                                                       nw-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      98 bytes16:03, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       pointer.gif
                                                                                                                                                      No description
                                                                                                                                                      109 bytes16:03, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                      progress.gif
                                                                                                                                                      No description
                                                                                                                                                      136 bytes20:30, 26 Apr 2009Jürgen JekaActions
                                                                                                                                                      row-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      88 bytes23:04, 27 Apr 2009Jürgen JekaActions
                                                                                                                                                       s-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      91 bytes16:03, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       se-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      97 bytes16:03, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       sw-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      98 bytes16:04, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       text.gif
                                                                                                                                                      No description
                                                                                                                                                      86 bytes16:04, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       vertical-text.gif
                                                                                                                                                      No description
                                                                                                                                                      84 bytes16:04, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       w-resize.gif
                                                                                                                                                      No description
                                                                                                                                                      89 bytes16:04, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                       wait.gif
                                                                                                                                                      No description
                                                                                                                                                      114 bytes16:04, 21 Apr 2009Jürgen JekaActions
                                                                                                                                                      zoom-in.gif
                                                                                                                                                      No description
                                                                                                                                                      98 bytes21:16, 26 Apr 2009Jürgen JekaActions
                                                                                                                                                      zoom-out.gif
                                                                                                                                                      No description
                                                                                                                                                      96 bytes21:16, 26 Apr 2009Jürgen JekaActions

                                                                                                                                                      Attach file

                                                                                                                                                      Page last modified 14:09, 16 Oct 2011 by teoli

                                                                                                                                                      :default - MDN

                                                                                                                                                        :default

                                                                                                                                                        Table of contents

                                                                                                                                                        1. 1. Summary
                                                                                                                                                        2. 2. Syntax
                                                                                                                                                        3. 3. Examples
                                                                                                                                                        4. 4. Specification
                                                                                                                                                        Table of contents
                                                                                                                                                        1. 1. Summary
                                                                                                                                                        2. 2. Syntax
                                                                                                                                                        3. 3. Examples
                                                                                                                                                        4. 4. Specification

                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                        This content covers features introduced in Firefox 3.

                                                                                                                                                        Summary

                                                                                                                                                        The :default pseudo-class represents any user interface element that is the default among a group of similar elements.

                                                                                                                                                        For example, the default button in a set of buttons could be selected using this pseudo-class.

                                                                                                                                                        User interface elements that permit multiple selections may have multiple defaults set in order to initially appear with multiple items selected. In that case all defaults can be represented using the :default pseudo-class.

                                                                                                                                                        Syntax

                                                                                                                                                        :default { style properties }
                                                                                                                                                        

                                                                                                                                                        Examples

                                                                                                                                                        :default
                                                                                                                                                        {
                                                                                                                                                            background-color: lime;
                                                                                                                                                        }

                                                                                                                                                        ...where...

                                                                                                                                                        <form method="get">
                                                                                                                                                          <p><input type="submit" id="submit1"></p>
                                                                                                                                                          <p><input type="submit" id="submit2"></p>
                                                                                                                                                          <p><input type="reset"></p>
                                                                                                                                                         </form>

                                                                                                                                                        This example causes the background color to be lime for the default submit button in the form.

                                                                                                                                                        Tags (3)

                                                                                                                                                        Edit tags

                                                                                                                                                        Attachments (0)

                                                                                                                                                         

                                                                                                                                                        Attach file

                                                                                                                                                        Page last modified 12:25, 21 Sep 2011 by teoli

                                                                                                                                                        direction - MDN

                                                                                                                                                          direction

                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                          Summary

                                                                                                                                                          The direction property should be set to match the direction of the text: rtl for Hebrew or Arabic text and ltr for other scripts. This should normally be done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

                                                                                                                                                          The property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. It also sets the default alignment of text and block-level elements and the direction that cells flow within a table row.

                                                                                                                                                          Syntax

                                                                                                                                                          direction: [ ltr | rtl | inherit ] ;
                                                                                                                                                          

                                                                                                                                                          Values

                                                                                                                                                          ltr 
                                                                                                                                                          The default value of direction. Text and other elements go from left to right
                                                                                                                                                          rtl 
                                                                                                                                                          Text and other elements go from right to left

                                                                                                                                                          For the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be 'embed' or 'override'.

                                                                                                                                                          Examples

                                                                                                                                                          blockquote {
                                                                                                                                                            direction : rtl ;
                                                                                                                                                          }
                                                                                                                                                          

                                                                                                                                                          Notes

                                                                                                                                                          Unlike the dir attribute in HTML, the direction property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of the rows but not inside of the columns.

                                                                                                                                                          Specification

                                                                                                                                                          Browser compatibility

                                                                                                                                                          • Desktop
                                                                                                                                                          • Mobile

                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                          Basic support 2.0 1.0 (1.7 or earlier) 5.5 9.2 1.3
                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                          Basic support 1.0 1.0 (1.0) 6 8 3.1

                                                                                                                                                          See also

                                                                                                                                                          unicode-bidi

                                                                                                                                                          Tags (3)

                                                                                                                                                          Edit tags

                                                                                                                                                          Attachments (0)

                                                                                                                                                           

                                                                                                                                                          Attach file

                                                                                                                                                          Page last modified 18:51, 1 Sep 2011 by McGurk

                                                                                                                                                          :disabled - MDN

                                                                                                                                                            :disabled

                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                            Summary

                                                                                                                                                            The :disabled pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

                                                                                                                                                            Examples

                                                                                                                                                            Example selectors

                                                                                                                                                            input:disabled
                                                                                                                                                            Selects all disabled inputs
                                                                                                                                                            select.country:disabled
                                                                                                                                                            Targets a select element with class country that is disabled

                                                                                                                                                            Usage example

                                                                                                                                                            The following CSS:

                                                                                                                                                            .input[type="text"]:disabled {background:#ccc}
                                                                                                                                                            

                                                                                                                                                            applied to this HTML5 fragment:

                                                                                                                                                            <form action="#">
                                                                                                                                                              <fieldset>
                                                                                                                                                                <legend>Shipping address</legend>
                                                                                                                                                                <input type="text" name="shipping_firstName" disabled>
                                                                                                                                                                <input type="text" name="shipping_lastName" disabled>
                                                                                                                                                                <input type="text" name="shipping_address1" disabled>
                                                                                                                                                                <input type="text" name="shipping_address2" disabled>
                                                                                                                                                                <input type="text" name="shipping_zipCode" disabled>
                                                                                                                                                                <input type="text" name="shipping_town" disabled>
                                                                                                                                                              </fieldset>
                                                                                                                                                              <fieldset>
                                                                                                                                                                <legend>Billing address</legend>
                                                                                                                                                                <label>
                                                                                                                                                                  <input type="checkbox" name="billing_is_shipping" value="true" checked> 
                                                                                                                                                                  Billing address is the same as shipping address
                                                                                                                                                                </label>
                                                                                                                                                                <input type="text" name="billing_firstName" disabled>
                                                                                                                                                                <input type="text" name="billing_lastName" disabled>
                                                                                                                                                                <input type="text" name="billing_address1" disabled>
                                                                                                                                                                <input type="text" name="billing_address2" disabled>
                                                                                                                                                                <input type="text" name="billing_zipCode" disabled>
                                                                                                                                                                <input type="text" name="billing_town" disabled>
                                                                                                                                                              </fieldset>
                                                                                                                                                            </form>

                                                                                                                                                            Will result in all text elements in the billing fieldset having a light grey background.

                                                                                                                                                            Specifications

                                                                                                                                                            Browser compatibility

                                                                                                                                                            • Desktop
                                                                                                                                                            • Mobile

                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                            Basic support ? 1.0 (1.7 or earlier) 9 9.0 ?
                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                            Tags (4)

                                                                                                                                                            Edit tags

                                                                                                                                                            Attachments (0)

                                                                                                                                                             

                                                                                                                                                            Attach file

                                                                                                                                                            Page last modified 12:32, 21 Sep 2011 by teoli

                                                                                                                                                            display - MDN

                                                                                                                                                              display

                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                              Summary

                                                                                                                                                              The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.

                                                                                                                                                              In addition to the many different display box types, the value none allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree.

                                                                                                                                                              Syntax

                                                                                                                                                              display:  <display-value> | 
                                                                                                                                                              inherit

                                                                                                                                                              Values

                                                                                                                                                              <display-value> can be any of the following values:

                                                                                                                                                              none
                                                                                                                                                              Turns off the display of an element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.
                                                                                                                                                              To render an element box's dimensions, yet have its contents be invisible, see the visibility property.
                                                                                                                                                              inline
                                                                                                                                                              The element generates one or more inline element boxes.
                                                                                                                                                              block
                                                                                                                                                              The element generates a block element box.
                                                                                                                                                              inline-block Requires Gecko 1.9
                                                                                                                                                              Introduced in CSS 2.1. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
                                                                                                                                                              list-item
                                                                                                                                                              The element generates a block box for the content and a separate list-item inline box.
                                                                                                                                                              compact
                                                                                                                                                              Unsupported, dropped from the CSS 2.1 standard.
                                                                                                                                                              run-in
                                                                                                                                                              Dropped from the final CSS 2.1 standard (but may be in CSS 3), but supported by other browsers.
                                                                                                                                                              Unimplemented (see bug 2056 ) in Gecko/Firefox
                                                                                                                                                              1. If the run-in box contains a block box, same as block.
                                                                                                                                                              2. If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
                                                                                                                                                              3. If a inline box follows, the run-in box becomes a block box.
                                                                                                                                                              table
                                                                                                                                                              Behaves like the <table> HTML element.
                                                                                                                                                              inline-table New in Firefox 3
                                                                                                                                                              The inline-table value does not have a direct mapping in HTML.
                                                                                                                                                              table-caption
                                                                                                                                                              Behaves like the <caption> HTML element.
                                                                                                                                                              table-column | table-column-group
                                                                                                                                                              These elements behave like the corresponding <col> and <colgroup> HTML elements.
                                                                                                                                                              table-header-group | table-row-group | table-footer-group
                                                                                                                                                              These elements behave like the corresponding <thead> | <tbody> | <tfoot> HTML elements.
                                                                                                                                                              table-row
                                                                                                                                                              Behaves like the <tr> HTML element.
                                                                                                                                                              table-cell
                                                                                                                                                              Behaves like the <td> HTML element.

                                                                                                                                                              Mozilla Extensions

                                                                                                                                                              These display values are not intended for use in web content. [fixme: needs update]

                                                                                                                                                              -moz-inline-block Obsolete
                                                                                                                                                              Never supported reliably.
                                                                                                                                                              -moz-inline-table Obsolete
                                                                                                                                                              Never supported.
                                                                                                                                                              -moz-box
                                                                                                                                                              Child elements are laid out horizontally or vertically (based on the value of the -moz-box-orient property).
                                                                                                                                                              -moz-inline-box
                                                                                                                                                              -moz-groupbox
                                                                                                                                                              -moz-grid
                                                                                                                                                              -moz-inline-grid
                                                                                                                                                              Child elements are laid out as a XUL grid.
                                                                                                                                                              -moz-grid-group
                                                                                                                                                              Child elements are laid out as a group of grid columns or rows. This is the layout used by the rows and columns elements. You can use the orientation (-moz-box-orient) to set which direction. Rows would normally have vertical orientation and columns would have a horizontal orientation.
                                                                                                                                                              -moz-grid-line
                                                                                                                                                              Child elements are laid out as a single column or row of a grid. You can use the orientation (-moz-box-orient) to set which direction.
                                                                                                                                                              -moz-stack
                                                                                                                                                              Child elements are laid out one on top of each other like the XUL stack element.
                                                                                                                                                              -moz-inline-stack
                                                                                                                                                              Child elements, including inline-block, block, and -moz-inline-stack are laid out atop one another.
                                                                                                                                                              -moz-deck
                                                                                                                                                              Child elements are laid out one on top of each other like the XUL deck element. Unlike a stack, only the top element is displayed.
                                                                                                                                                              -moz-popup
                                                                                                                                                              -moz-marker

                                                                                                                                                              Examples

                                                                                                                                                              View Live Examples

                                                                                                                                                              p.secret  { display: none }
                                                                                                                                                              <p style="display:none"> invisible text </p>
                                                                                                                                                              

                                                                                                                                                              Notes

                                                                                                                                                              "Block" versus "in-line" elements

                                                                                                                                                              • Block-level elements create vertically distinct blocks of content - generally using a line-break before and after the content. Only this value for the display is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as <p>, <div>, <blockquote> or <h1>. display property values creating a block element type: block, list-item, table, compact and run-in.
                                                                                                                                                              • In-line elements do not create distinct blocks of content; element content is rendered using a line box (content is distributed line by line within a containing physical or virtual block element.) In-line behavior is exhibited by such HTML elements as physical and virtual character formatting, non-floated images and unmarked content. display property values creating an in-line element type: inline, inline-block, inline-table and run-in. An inline element's height is fixed to height of line which contains this element, so its height cannot be changed by CSS properties such as "padding" or "margin" except  "line-height".

                                                                                                                                                              Requires Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                              XBL bindings and display:none

                                                                                                                                                              Starting in Gecko 2.0, XBL bindings are no longer attached to elements when in subtrees of the DOM styled with display: none when they're first accessed from JavaScript, unless the elements in question are XUL.

                                                                                                                                                              Browser compatibility

                                                                                                                                                              • Desktop
                                                                                                                                                              • Mobile

                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                              none | inline | block 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
                                                                                                                                                              inline-block 1.0 3.0 (1.9) 5.5 (-7.0)
                                                                                                                                                              natural inline elements only
                                                                                                                                                              7.0 1.0 (85)
                                                                                                                                                              list-item 1.0 1.0 (1.0) 6.0 7.0 1.0 (85)
                                                                                                                                                              run-in Non-standard 1.0
                                                                                                                                                              Not before inline-elements
                                                                                                                                                              --  8.0 7.0 1.0 (85)
                                                                                                                                                              Not before inline-elements
                                                                                                                                                              4.0 5.0 (532.5)
                                                                                                                                                              inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
                                                                                                                                                              CSS 2.1 values 1.0 1.0 (1.0)
                                                                                                                                                              except run-in, inline block, and inline-table
                                                                                                                                                              8.0 7.0 1.0 (85)
                                                                                                                                                              3.0 (1.9)
                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                              Basic support ? ? ? ? ?

                                                                                                                                                              Tags (3)

                                                                                                                                                              Edit tags

                                                                                                                                                              Attachments (0)

                                                                                                                                                               

                                                                                                                                                              Attach file

                                                                                                                                                              Page last modified 02:19, 11 Oct 2011 by Sheppy

                                                                                                                                                              empty-cells - MDN

                                                                                                                                                                empty-cells

                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                Summary

                                                                                                                                                                empty-cells CSS property specifies how user agent should render borders and backgrounds around cells that have no visible content.

                                                                                                                                                                Syntax

                                                                                                                                                                empty-cells: show | hide | inherit
                                                                                                                                                                

                                                                                                                                                                Values

                                                                                                                                                                inherit
                                                                                                                                                                show
                                                                                                                                                                borders and backgrounds should be drawn like a normal cells
                                                                                                                                                                hide
                                                                                                                                                                no borders or backgrounds should be drawn

                                                                                                                                                                Examples

                                                                                                                                                                View Live Examples

                                                                                                                                                                .contentbox td {
                                                                                                                                                                  empty-cells: show;
                                                                                                                                                                }
                                                                                                                                                                

                                                                                                                                                                Browser compatibility

                                                                                                                                                                • Desktop
                                                                                                                                                                • Mobile

                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                Basic support 1.0 1.0 (1.7 or earlier) 8.0 4.0 1.2
                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                Basic support 1 1.0 (1.0) 8 6 3.1

                                                                                                                                                                Tags (3)

                                                                                                                                                                Edit tags

                                                                                                                                                                Attachments (0)

                                                                                                                                                                 

                                                                                                                                                                Attach file

                                                                                                                                                                Page last modified 18:56, 1 Sep 2011 by McGurk

                                                                                                                                                                :empty - MDN

                                                                                                                                                                  :empty

                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                  Summary

                                                                                                                                                                  The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

                                                                                                                                                                  Syntax

                                                                                                                                                                  span:empty { style properties }
                                                                                                                                                                  

                                                                                                                                                                  Examples

                                                                                                                                                                  span:empty::before  { background-color: lime; }

                                                                                                                                                                  ...where...

                                                                                                                                                                  <span></span>

                                                                                                                                                                  Browser compatibility

                                                                                                                                                                  Browser Lowest Version
                                                                                                                                                                  Internet Explorer ---
                                                                                                                                                                  Firefox (Gecko) 1.5 (1.8)
                                                                                                                                                                  Opera 9.5
                                                                                                                                                                  Safari (WebKit) 3.1 (525), very buggy before

                                                                                                                                                                  Tags (5)

                                                                                                                                                                  Edit tags

                                                                                                                                                                  Attachments (0)

                                                                                                                                                                   

                                                                                                                                                                  Attach file

                                                                                                                                                                  Page last modified 12:00, 21 Sep 2011 by teoli

                                                                                                                                                                  :enabled - MDN

                                                                                                                                                                    :enabled

                                                                                                                                                                    Table of contents

                                                                                                                                                                    1. 1. Specifications
                                                                                                                                                                    2. 2. Browser compatibility

                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                    Browser compatibility

                                                                                                                                                                    Browser Lowest Version
                                                                                                                                                                    Internet Explorer ?
                                                                                                                                                                    Firefox ?
                                                                                                                                                                    Opera ?
                                                                                                                                                                    Safari ?

                                                                                                                                                                     

                                                                                                                                                                     

                                                                                                                                                                    Tags (5)

                                                                                                                                                                    Edit tags

                                                                                                                                                                    Attachments (0)

                                                                                                                                                                     

                                                                                                                                                                    Attach file

                                                                                                                                                                    Page last modified 05:11, 14 Feb 2009 by BijuGC

                                                                                                                                                                    :first-child - MDN

                                                                                                                                                                      :first-child

                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                      Summary

                                                                                                                                                                      The :first-child pseudo-class represents any element that is the first child element of its parent.

                                                                                                                                                                      Syntax

                                                                                                                                                                      element:first-child { style properties }
                                                                                                                                                                      

                                                                                                                                                                      Examples

                                                                                                                                                                      span:first-child
                                                                                                                                                                      {
                                                                                                                                                                          background-color: lime;
                                                                                                                                                                      }

                                                                                                                                                                      ...where...

                                                                                                                                                                      <div>
                                                                                                                                                                          <span>This span is limed!</span>
                                                                                                                                                                          <span>This span is not. :(</span>
                                                                                                                                                                        </div>

                                                                                                                                                                      ... should look like ...
                                                                                                                                                                      This span is limed! This span is not. :(

                                                                                                                                                                      Specifications

                                                                                                                                                                      Browser compatibility

                                                                                                                                                                      • Desktop
                                                                                                                                                                      • Mobile

                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                      Basic support 4.0 3.0 (1.9) 7 9.5 4
                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                      Basic support 1.0 1.0 (1.9.1) 7 10.0 3.1

                                                                                                                                                                      Notes

                                                                                                                                                                      • In Internet Explorer 8, if a element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

                                                                                                                                                                      Tags (3)

                                                                                                                                                                      Edit tags

                                                                                                                                                                      Attachments (0)

                                                                                                                                                                       

                                                                                                                                                                      Attach file

                                                                                                                                                                      Page last modified 14:33, 21 Sep 2011 by teoli

                                                                                                                                                                      :first - MDN

                                                                                                                                                                        :first

                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                        Summary

                                                                                                                                                                        The :first page pseudo-class describes the styling of the first page when printing a document.

                                                                                                                                                                        Note: you can not change all CSS properties. You can only change the margins, orphans, widows, and page breaks of the document. All other CSS properties will be ignored.

                                                                                                                                                                        Examples

                                                                                                                                                                        @page :first {
                                                                                                                                                                          margin:2in 3in;
                                                                                                                                                                        } 
                                                                                                                                                                        
                                                                                                                                                                        Note: you may only use the absolute length units when defining the margin. Please see the page about length for more information.

                                                                                                                                                                        Browser compatibility

                                                                                                                                                                        Browser Lowest Version
                                                                                                                                                                        Internet Explorer
                                                                                                                                                                        8.0
                                                                                                                                                                        Firefox (Gecko) ---
                                                                                                                                                                        Opera
                                                                                                                                                                        9.2
                                                                                                                                                                        Safari (WebKit) ---

                                                                                                                                                                        See also

                                                                                                                                                                        Tags (5)

                                                                                                                                                                        Edit tags

                                                                                                                                                                        Attachments (0)

                                                                                                                                                                         

                                                                                                                                                                        Attach file

                                                                                                                                                                        Page last modified 11:21, 21 Sep 2011 by teoli

                                                                                                                                                                        ::first-letter | :first-letter - MDN

                                                                                                                                                                          ::first-letter | :first-letter

                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                          Summary

                                                                                                                                                                          The :first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

                                                                                                                                                                          Examples

                                                                                                                                                                          /* make the first letter of every paragraph red and big */
                                                                                                                                                                          
                                                                                                                                                                          p:first-letter  { color: red;  font-size: 130%; }

                                                                                                                                                                          Browser compatibility

                                                                                                                                                                          CSS 3 introduced the ::first-letter notation in order to establish a discrimination between pseudo-classes and pseudo-elements. Don't use the double colon notation yet for compatibility with Internet Explorer.

                                                                                                                                                                          Browser Lowest Version Support of
                                                                                                                                                                          Internet Explorer 5.5 :first-letter
                                                                                                                                                                          Firefox (Gecko) 1.0 (1.0) :first-letter
                                                                                                                                                                          1.0 (1.5) :first-letter | ::first-letter
                                                                                                                                                                          Opera 3.5 :first-letter
                                                                                                                                                                          7.0 :first-letter | ::first-letter
                                                                                                                                                                          Safari (WebKit) 1.0 :first-letter | ::first-letter

                                                                                                                                                                           

                                                                                                                                                                          Tags (3)

                                                                                                                                                                          Edit tags

                                                                                                                                                                          Attachments (0)

                                                                                                                                                                           

                                                                                                                                                                          Attach file

                                                                                                                                                                          Page last modified 15:34, 25 May 2009 by Jürgen Jeka

                                                                                                                                                                          ::first-line | :first-line - MDN

                                                                                                                                                                            ::first-line | :first-line

                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                            Summary

                                                                                                                                                                            The :first-line CSS pseudo-element applies styles to the first line of a element. However, the selector :first-line does not match any real HTML element.

                                                                                                                                                                            Examples

                                                                                                                                                                            /* change the letters of the first line of every paragraph to uppercase */
                                                                                                                                                                            
                                                                                                                                                                            p:first-line { text-transform: uppercase }
                                                                                                                                                                            

                                                                                                                                                                            Browser compatibility

                                                                                                                                                                            Browser Lowest version Support of
                                                                                                                                                                            Internet Explorer 5.5 :first-line
                                                                                                                                                                            Firefox (Gecko) 1.0 (1.0) :first-line
                                                                                                                                                                            1.0 (1.5) :first-line | ::first-line
                                                                                                                                                                            Opera 3.5 :first-line
                                                                                                                                                                            7.0 :first-line | ::first-line
                                                                                                                                                                            Safari (WebKit) 1.0 (85) :first-line | ::first-line

                                                                                                                                                                            For compatibility with IE 5.5-8 avoid CSS3 notation ::first-line (use CSS2 notation :first-line).

                                                                                                                                                                            Tags (3)

                                                                                                                                                                            Edit tags

                                                                                                                                                                            Attachments (0)

                                                                                                                                                                             

                                                                                                                                                                            Attach file

                                                                                                                                                                            Page last modified 13:22, 14 Aug 2009 by Jürgen Jeka

                                                                                                                                                                            :first-of-type - MDN

                                                                                                                                                                              :first-of-type

                                                                                                                                                                              Table of contents

                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                              3. 3. Example
                                                                                                                                                                              4. 4. See also
                                                                                                                                                                              Table of contents
                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                              3. 3. Example
                                                                                                                                                                              4. 4. See also

                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                              Introduced in Gecko 1.9.1

                                                                                                                                                                              (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                              Summary

                                                                                                                                                                              The :first-of-type pseudo-class represents the first sibling of the given type in the list of children of its parent element.

                                                                                                                                                                              Syntax

                                                                                                                                                                              element:first-of-type { style properties }
                                                                                                                                                                              

                                                                                                                                                                              Example

                                                                                                                                                                              To match the first data cell in a table row, you can use this:

                                                                                                                                                                              tr > td:first-of-type

                                                                                                                                                                              Tags (4)

                                                                                                                                                                              Edit tags

                                                                                                                                                                              Attachments (0)

                                                                                                                                                                               

                                                                                                                                                                              Attach file

                                                                                                                                                                              Page last modified 11:56, 21 Sep 2011 by teoli

                                                                                                                                                                              float - MDN

                                                                                                                                                                                float

                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                Summary

                                                                                                                                                                                The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

                                                                                                                                                                                A floating element is one where the Computed value of float is not none.

                                                                                                                                                                                Syntax

                                                                                                                                                                                float:  left | right | none | 
                                                                                                                                                                                inherit

                                                                                                                                                                                Values

                                                                                                                                                                                left
                                                                                                                                                                                The element floats on the left side of its containing block.
                                                                                                                                                                                right
                                                                                                                                                                                The element floats on the right side of its containing block.
                                                                                                                                                                                none
                                                                                                                                                                                The element does not float.

                                                                                                                                                                                Examples

                                                                                                                                                                                View Live Examples

                                                                                                                                                                                <style type="text/css">
                                                                                                                                                                                  div { border: solid red;  max-width: 70ex; }
                                                                                                                                                                                  h4  { float: left;  margin: 0; }
                                                                                                                                                                                </style>
                                                                                                                                                                                 
                                                                                                                                                                                <div>
                                                                                                                                                                                  <h4>HELLO!</h4>
                                                                                                                                                                                  This is some text. This is some text. This is some text.
                                                                                                                                                                                  This is some text. This is some text. This is some text.
                                                                                                                                                                                  This is some text. This is some text. This is some text.
                                                                                                                                                                                  This is some text. This is some text. This is some text.
                                                                                                                                                                                </div>

                                                                                                                                                                                HELLO!

                                                                                                                                                                                This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

                                                                                                                                                                                 

                                                                                                                                                                                Notes

                                                                                                                                                                                Note that if you're referring to this property from JavaScript as a member of the element.style object, you must spell it at cssFloat (see the list at DOM:CSS). Also note that IE spells this styleFloat.

                                                                                                                                                                                How floats are positioned

                                                                                                                                                                                As mentioned above, when an element is floated it is taken out of the normal flow of the document.  It is shifted to the left or right until it touches the edge of it's containing box or another floated element.

                                                                                                                                                                                In the image below, there are three red squares.  Two are floated left and one is floated right.  Note that the second "left" red square is placed to the right of the first.  Additional squares  would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.

                                                                                                                                                                                Clearing floats

                                                                                                                                                                                In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read "Lorem ipsum dolor sit amet," and was followed by another heading of the same style as the "Floats Example" heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we'd need to clear the floats.

                                                                                                                                                                                The simplest way to clear the floats in this example is to add the clear property to the new heading we want to be sure is aligned left:

                                                                                                                                                                                h2.secondHeading { clear: both; }
                                                                                                                                                                                

                                                                                                                                                                                However, this method only works if there are no other elements within the same block formatting context that we do want the heading to continue to appear next to horizontally. If our H2 has siblings which are a sidebars floated to the left and right, using clear will force it to appear below both sidebars, which is probably not what we want.

                                                                                                                                                                                If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats' container. Referring to the example above again, it appears that all three red boxes are within a P element. We can set the overflow property on that P to hidden or auto to cause it to expand to contain them, but not allow them to drop out the bottom of it:

                                                                                                                                                                                p.withRedBoxes { overflow: hidden; height: auto; }
                                                                                                                                                                                
                                                                                                                                                                                Note: Setting overflow to scroll will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting height to auto even though that's the default to indicate that the container should grow to accommodate its content.

                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                • Desktop
                                                                                                                                                                                • Mobile

                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                Basic support ? ? ? ? ?

                                                                                                                                                                                Tags (3)

                                                                                                                                                                                Edit tags

                                                                                                                                                                                Attachments (1)

                                                                                                                                                                                FileSizeDateAttached by 
                                                                                                                                                                                 floats.png
                                                                                                                                                                                Float example
                                                                                                                                                                                29.96 kB20:32, 28 Jan 2011mmclarkActions

                                                                                                                                                                                Attach file

                                                                                                                                                                                Page last modified 00:09, 15 Apr 2011 by grendel

                                                                                                                                                                                :focus - MDN

                                                                                                                                                                                  :focus

                                                                                                                                                                                  Table of contents

                                                                                                                                                                                  1. 1. Specifications
                                                                                                                                                                                  2. 2. Browser compatibility

                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                  Browser Lowest Version
                                                                                                                                                                                  Internet Explorer 8.0
                                                                                                                                                                                  Firefox 1.0
                                                                                                                                                                                  Opera 7.0
                                                                                                                                                                                  Safari (1.0 ?)

                                                                                                                                                                                  Tags (5)

                                                                                                                                                                                  Edit tags

                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                   

                                                                                                                                                                                  Attach file

                                                                                                                                                                                  Page last modified 03:20, 10 Apr 2009 by Jürgen Jeka

                                                                                                                                                                                  @font-face - MDN

                                                                                                                                                                                    @font-face

                                                                                                                                                                                    Summary

                                                                                                                                                                                    @font-face allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

                                                                                                                                                                                    Syntax

                                                                                                                                                                                    @font-face {
                                                                                                                                                                                      font-family: <a-remote-font-name>;
                                                                                                                                                                                      src: <source> [,<source>]*;
                                                                                                                                                                                      [font-weight: <weight>];
                                                                                                                                                                                      [font-style: <style>];
                                                                                                                                                                                    }
                                                                                                                                                                                    

                                                                                                                                                                                    Values

                                                                                                                                                                                    <a-remote-font-name> 
                                                                                                                                                                                    Specifies a font name that will be used as font face value for font properties.
                                                                                                                                                                                    <source> 
                                                                                                                                                                                    URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name").
                                                                                                                                                                                    <weight> 
                                                                                                                                                                                    A font weight value.
                                                                                                                                                                                    <style> 
                                                                                                                                                                                    A font style value.

                                                                                                                                                                                    You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.

                                                                                                                                                                                    Examples

                                                                                                                                                                                    This example simply specifies a downloadable font to use, applying it to the entire body of the document.

                                                                                                                                                                                    View live sample

                                                                                                                                                                                    <html>
                                                                                                                                                                                    <head>
                                                                                                                                                                                      <title>Web Font Sample</title>
                                                                                                                                                                                      <style type="text/css" media="screen, print">
                                                                                                                                                                                        @font-face {
                                                                                                                                                                                          font-family: "Bitstream Vera Serif Bold";
                                                                                                                                                                                          src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
                                                                                                                                                                                        }
                                                                                                                                                                                        
                                                                                                                                                                                        body { font-family: "Bitstream Vera Serif Bold", serif }
                                                                                                                                                                                      </style>
                                                                                                                                                                                    </head>
                                                                                                                                                                                    <body>
                                                                                                                                                                                      This is Bitstream Vera Serif Bold.
                                                                                                                                                                                    </body>
                                                                                                                                                                                    </html>
                                                                                                                                                                                    

                                                                                                                                                                                    In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user doesn't have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:

                                                                                                                                                                                    @font-face {
                                                                                                                                                                                      font-family: MyHelvetica;
                                                                                                                                                                                      src: local("Helvetica Neue Bold"),
                                                                                                                                                                                      local("HelveticaNeue-Bold"),
                                                                                                                                                                                      url(MgOpenModernaBold.ttf);
                                                                                                                                                                                      font-weight: bold;
                                                                                                                                                                                    }

                                                                                                                                                                                    Notes

                                                                                                                                                                                    • In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
                                                                                                                                                                                    • Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered.
                                                                                                                                                                                    • When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading.  As each web font finishes downloading, Gecko updates the text that uses that font.  This allows the user to read the text on the page more quickly.

                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                    • Desktop
                                                                                                                                                                                    • Mobile

                                                                                                                                                                                    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                    Basic support 3.5 (1.9.1) 4.0 4.0 10.0 3.1
                                                                                                                                                                                    WOFF 3.5 (1.9.1) 6.0 9.0 Nightly build Nightly build
                                                                                                                                                                                    SVG Font --
                                                                                                                                                                                    Unimplemented (see bug 119490 )
                                                                                                                                                                                    yes -- yes yes
                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
                                                                                                                                                                                    Basic support (Supported) 1.0 (1.9.1) ? -- 10.0 (Supported)
                                                                                                                                                                                    WOFF -- 5.0 (5.0) ? -- 11.0 --
                                                                                                                                                                                    SVG fonts -- --
                                                                                                                                                                                    Unimplemented (see bug 119490 )
                                                                                                                                                                                    ? -- 10.0 (Supported)

                                                                                                                                                                                    Notes

                                                                                                                                                                                    • Support of the Embedded OpenType font format is not included in the compatibility table because it is a proprietary feature. Prior to IE 9.0, IE supported only this format.
                                                                                                                                                                                    • TrueType and OpenType are not included because they are superseded by WOFF.

                                                                                                                                                                                    Specifications

                                                                                                                                                                                    Tags (4)

                                                                                                                                                                                    Edit tags

                                                                                                                                                                                    Attachments (2)

                                                                                                                                                                                    FileSizeDateAttached by 
                                                                                                                                                                                     VeraSeBd.ttf
                                                                                                                                                                                    No description
                                                                                                                                                                                    57.36 kB20:44, 13 Oct 2008SheppyActions
                                                                                                                                                                                    webfont-sample.html
                                                                                                                                                                                    No description
                                                                                                                                                                                    394 bytes15:58, 18 May 2009SheppyActions

                                                                                                                                                                                    Attach file

                                                                                                                                                                                    Page last modified 22:30, 5 Nov 2011 by fvsch

                                                                                                                                                                                    font-family - MDN

                                                                                                                                                                                      font-family

                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                      Summary

                                                                                                                                                                                      The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives.

                                                                                                                                                                                      It is often convenient to use the shorthand property font to set font-size and other font related properties at one go.

                                                                                                                                                                                      Syntax

                                                                                                                                                                                      font-family:  <family-or-generic-name> [, <family-or-generic-name>]* | 
                                                                                                                                                                                      inherit
                                                                                                                                                                                      

                                                                                                                                                                                      Values

                                                                                                                                                                                      <family-or-generic-name> is either a family-name or a generic-family.

                                                                                                                                                                                      family-name
                                                                                                                                                                                      The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.
                                                                                                                                                                                      generic-family
                                                                                                                                                                                      Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in case when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the a last alternative in the list of font family names.
                                                                                                                                                                                      serif
                                                                                                                                                                                      Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
                                                                                                                                                                                      E.g.  Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
                                                                                                                                                                                      sans-serif
                                                                                                                                                                                      Glyphs have stroke endings that are plain.
                                                                                                                                                                                      E.g. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif
                                                                                                                                                                                      cursive
                                                                                                                                                                                      Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.
                                                                                                                                                                                      fantasy
                                                                                                                                                                                      Fantasy fonts are primarily decorative fonts that contain playful representations of characters.
                                                                                                                                                                                      monospace
                                                                                                                                                                                      All glyphs have the same fixed width.
                                                                                                                                                                                      E.g. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace

                                                                                                                                                                                      Examples

                                                                                                                                                                                      View Live Examples

                                                                                                                                                                                      body     { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
                                                                                                                                                                                      
                                                                                                                                                                                      .receipt { font-family: Courier, "Lucida Console", monospace }
                                                                                                                                                                                      

                                                                                                                                                                                      Notes

                                                                                                                                                                                      You should always specify a generic family name as the last value in the font-family property.

                                                                                                                                                                                      The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not simply stop at the first font named in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph that can display a character needed, the later available fonts are tried. However, this doesn't work in Internet Explorer.

                                                                                                                                                                                      When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                      • Desktop
                                                                                                                                                                                      • Mobile

                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                      Basic support 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                      Tags (4)

                                                                                                                                                                                      Edit tags

                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                       

                                                                                                                                                                                      Attach file

                                                                                                                                                                                      Page last modified 20:45, 15 Apr 2011 by grendel

                                                                                                                                                                                      font - MDN

                                                                                                                                                                                        font

                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                        Summary

                                                                                                                                                                                        The font CSS property has two different use cases:

                                                                                                                                                                                        1. font is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family in a single CSS declaration.
                                                                                                                                                                                        2. The font property stets the element's font to a system font.

                                                                                                                                                                                        Syntax

                                                                                                                                                                                        font:   [ 
                                                                                                                                                                                        font-style|| 
                                                                                                                                                                                        font-variant|| 
                                                                                                                                                                                        font-weight]? 
                                                                                                                                                                                        font-size[ / 
                                                                                                                                                                                        line-height]? 
                                                                                                                                                                                        font-family
                                                                                                                                                                                        font:   caption | icon | menu | message-box | small-caption | status-bar | 
                                                                                                                                                                                        inherit|
                                                                                                                                                                                        
                                                                                                                                                                                               -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | 
                                                                                                                                                                                               -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field
                                                                                                                                                                                        

                                                                                                                                                                                        Values

                                                                                                                                                                                        Using the font shorthand property sets the longhand properties as specified, and sets all other font-related properties to their initial values. See font-style, font-variant, font-weight, font-size, line-height, and font-family for legal values of each property.

                                                                                                                                                                                        System Fonts

                                                                                                                                                                                        System fonts can also be specified using the font property, instead of specifying individual longhand properties:

                                                                                                                                                                                        caption
                                                                                                                                                                                        The font used for captioned controls (e.g., buttons, drop-downs, etc.).
                                                                                                                                                                                        icon
                                                                                                                                                                                        The font used to label icons.
                                                                                                                                                                                        menu
                                                                                                                                                                                        The font used in menus (e.g., dropdown menus and menu lists).
                                                                                                                                                                                        message-box
                                                                                                                                                                                        The font used in dialog boxes.
                                                                                                                                                                                        small-caption
                                                                                                                                                                                        The font used for labeling small controls.
                                                                                                                                                                                        status-bar
                                                                                                                                                                                        The font used in window status bars.

                                                                                                                                                                                        Mozilla Extensions

                                                                                                                                                                                        -moz-window
                                                                                                                                                                                        The default system font used in windows.
                                                                                                                                                                                        -moz-document
                                                                                                                                                                                        -moz-workspace
                                                                                                                                                                                        -moz-desktop
                                                                                                                                                                                        -moz-info
                                                                                                                                                                                        -moz-dialog
                                                                                                                                                                                        -moz-button
                                                                                                                                                                                        -moz-pull-down-menu
                                                                                                                                                                                        -moz-list
                                                                                                                                                                                        -moz-field

                                                                                                                                                                                        Examples

                                                                                                                                                                                        View Live Examples

                                                                                                                                                                                        /* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */
                                                                                                                                                                                        p { font: 12px/14px sans-serif }
                                                                                                                                                                                        
                                                                                                                                                                                        /* Set the font size to 80% of the parent element or default value (if no parent element present) 
                                                                                                                                                                                        and set the font family to sans-serif */ 
                                                                                                                                                                                        p { font: 80% sans-serif }
                                                                                                                                                                                        
                                                                                                                                                                                        /* Set the font weight to bold, the font-style to italic, the font size to large, 
                                                                                                                                                                                        and the font family to serif. */
                                                                                                                                                                                        p { font: bold italic large serif }
                                                                                                                                                                                        
                                                                                                                                                                                        /* Use the same font as the status bar of the window */
                                                                                                                                                                                        p { font: status-bar }

                                                                                                                                                                                        Notes

                                                                                                                                                                                        The font-size and font-family parts of the shorthand are mandatory. Omitting them is a syntax error, and causes the entire declaration to be ignored.

                                                                                                                                                                                        Properties for which no values are given are set to their initial value, which is normal for all properties that can be omitted ( font-style, font-variant, font-weight, and line-height).

                                                                                                                                                                                        The font-size-adjust property is also set to its initial value (none) when the font shorthand property is specified.

                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                        • Desktop
                                                                                                                                                                                        • Mobile

                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                        Shorthand 1.0 1.0 (1.0) 3.0-4.0 3.5 1.0 (85)
                                                                                                                                                                                        System fonts 1.0 1.0 (1.0) 4.0-5.5 6.0 1.0 (85)
                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                        Specifications

                                                                                                                                                                                        Tags (3)

                                                                                                                                                                                        Edit tags

                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                         

                                                                                                                                                                                        Attach file

                                                                                                                                                                                        Page last modified 21:54, 14 Apr 2011 by grendel

                                                                                                                                                                                        font-size-adjust - MDN

                                                                                                                                                                                          font-size-adjust

                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                          Summary

                                                                                                                                                                                          The font-size-adjust CSS property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters.

                                                                                                                                                                                          This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. This can cause problems when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

                                                                                                                                                                                          To do this in a way that is compatible with browsers that do not support font-size-adjust, it is specified as a number that the font-size property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, a style sheet that specifies

                                                                                                                                                                                          font-size: 16px;  font-size-adjust: 0.5;

                                                                                                                                                                                          is really specifying that the lowercase letters of the font should be 8px high (0.5 × 16px).

                                                                                                                                                                                          Syntax

                                                                                                                                                                                          font-size-adjust:  <number> | none | 
                                                                                                                                                                                          inherit

                                                                                                                                                                                          Values

                                                                                                                                                                                          none
                                                                                                                                                                                          Choose the size of the font based only on the font-size property.
                                                                                                                                                                                          <number>

                                                                                                                                                                                          Choose the size of the font so that its lowercase letters (as determined by the x-height metric of the font) are the specified number times the font-size.

                                                                                                                                                                                          The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice font-family. This will mean that the first choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust.

                                                                                                                                                                                          Examples

                                                                                                                                                                                          View Live Examples

                                                                                                                                                                                          p {
                                                                                                                                                                                             font: 12px Verdana, "DejaVu Sans", sans-serif;
                                                                                                                                                                                             font-size-adjust: 0.58;
                                                                                                                                                                                          }

                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                          • Desktop
                                                                                                                                                                                          • Mobile

                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                          Basic support --  1.0 (1.0)
                                                                                                                                                                                          Windows only
                                                                                                                                                                                          --  --  -- 
                                                                                                                                                                                          3.0 (1.9)
                                                                                                                                                                                          All platforms
                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                          Basic support ? 1.0 (1.9.2) ? ? ?

                                                                                                                                                                                          Specifications

                                                                                                                                                                                          This property was specified in CSS 2, but removed from CSS 2.1. It may come back in CSS 3.

                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                          Edit tags

                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                           

                                                                                                                                                                                          Attach file

                                                                                                                                                                                          Page last modified 13:27, 11 Aug 2011 by syssgx

                                                                                                                                                                                          font-size - MDN

                                                                                                                                                                                            font-size

                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                            Summary

                                                                                                                                                                                            The font-size property specifies the size of the font. The font size may, in turn, change the size of other items, since it is used to compute the value of em and ex length units.

                                                                                                                                                                                            Syntax

                                                                                                                                                                                            font-size: xx-small | x-small | small | medium | large | x-large | xx-large
                                                                                                                                                                                            font-size: smaller | larger
                                                                                                                                                                                            font-size: <length> | <percentage> | 
                                                                                                                                                                                            inherit

                                                                                                                                                                                            Values

                                                                                                                                                                                            xx-small, x-small, small, medium, large, x-large, xx-large 
                                                                                                                                                                                            A set of absolute size keywords based on the user's default font size (which is medium). Similar to presentational HTML's <font size="1"> through <font size="7"> where the user's default font size is <font size="3">.
                                                                                                                                                                                            larger, smaller 
                                                                                                                                                                                            Larger or smaller than the parent element's font size, by roughly the ratio used to separate the absolute size keywords above.
                                                                                                                                                                                            length
                                                                                                                                                                                            A positive length. When the units are specified in em or ex,  the size is defined relative to the size of the font on the parent element of the element in question. For example, 0.5em is half the font size of the parent of the current element.
                                                                                                                                                                                            percentage
                                                                                                                                                                                            A positive percentage of the parent element's font size.

                                                                                                                                                                                            It is best to avoid using values that are not relative to the user's default font size, such as lengths with units other than em or ex. However, if such values must be used, px are preferred over other units because their meaning does not vary depending on what the operating system thinks (generally incorrectly) the resolution of the monitor is.

                                                                                                                                                                                            Possible approaches

                                                                                                                                                                                            There are several ways to specify the font size, with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

                                                                                                                                                                                            Keywords

                                                                                                                                                                                            Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

                                                                                                                                                                                            Pixels

                                                                                                                                                                                            Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

                                                                                                                                                                                            Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

                                                                                                                                                                                            Note: Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.

                                                                                                                                                                                            Ems

                                                                                                                                                                                            Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

                                                                                                                                                                                            In order to calculate the em equivalent for any pixel value required, you can use this formula:

                                                                                                                                                                                            em = desired element pixel value / parent element font-size in pixels

                                                                                                                                                                                            For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

                                                                                                                                                                                            A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:

                                                                                                                                                                                            body {
                                                                                                                                                                                              font-size: 62.5%; /* font-size 1em = 10px */
                                                                                                                                                                                            }
                                                                                                                                                                                            p {
                                                                                                                                                                                              font-size: 1.6em; /* 1.6em = 16px */
                                                                                                                                                                                            }

                                                                                                                                                                                             The em is a very useful unit in CSS, since it can adapt automatically to the font that the reader chooses to use.

                                                                                                                                                                                            Examples

                                                                                                                                                                                            View Live Examples

                                                                                                                                                                                            /* Set paragraph text to be very large. */
                                                                                                                                                                                            p { font-size: xx-large }
                                                                                                                                                                                            
                                                                                                                                                                                            /* Set h1 (level 1 heading) text to be 2.5 times the size
                                                                                                                                                                                             * of the text around it. */
                                                                                                                                                                                            h1 { font-size: 250% }
                                                                                                                                                                                            
                                                                                                                                                                                            /* Sets text enclosed within span tag to be 16px */
                                                                                                                                                                                            span { font-size: 16px; }

                                                                                                                                                                                            Notes

                                                                                                                                                                                            em and ex units on the font-size property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for font-size.

                                                                                                                                                                                            Specifications

                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                            • Desktop
                                                                                                                                                                                            • Mobile

                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                            Basic support 2.0 1.0 5.5 9.2 1.3
                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                            Tags (3)

                                                                                                                                                                                            Edit tags

                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                             

                                                                                                                                                                                            Attach file

                                                                                                                                                                                            Page last modified 23:41, 13 May 2011 by jswisher

                                                                                                                                                                                            font-stretch - MDN

                                                                                                                                                                                              font-stretch

                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                              Summary

                                                                                                                                                                                              The font-stretch CSS property selects a normal, condensed, or extended face from a font family.

                                                                                                                                                                                              Syntax

                                                                                                                                                                                              font-stretch:  inherit | 
                                                                                                                                                                                                             ultra-condensed | extra-condensed | condensed | semi-condensed |
                                                                                                                                                                                                             normal | semi-expanded | expanded | extra-expanded | ultra-expanded |
                                                                                                                                                                                                             wider | narrower

                                                                                                                                                                                              Values

                                                                                                                                                                                              normal
                                                                                                                                                                                              Specifies a normal font face.
                                                                                                                                                                                              semi-condensed, condensed, extra-condensed, ultra-condensed
                                                                                                                                                                                              Specifies a font face condensed than normal, with ultra-condensed as the most condensed.
                                                                                                                                                                                              semi-expanded, expanded, extra-expanded, ultra-expanded
                                                                                                                                                                                              Specifies a font face expanded than normal, with ultra-expanded as the most expanded.
                                                                                                                                                                                              wider, narrower Deprecated since CSS 3
                                                                                                                                                                                              Relative values. The wider and narrower keywords indicate values relative to the values of the parent element.  

                                                                                                                                                                                              Examples

                                                                                                                                                                                              h1 { font-stretch: extra-expanded }
                                                                                                                                                                                              p  { font-stretch: condensed }
                                                                                                                                                                                              

                                                                                                                                                                                              Specifications

                                                                                                                                                                                              font-stretch was defined in CSS 2, but dropped in CSS 2.1 due lack of implementation experience. It's newly drafted in CSS 3.

                                                                                                                                                                                              The relative values wider and narrower have been dropped from the font-stretch property in the CSS Fonts Module Level 3 Working Draft (24 March 2011).

                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                              • Desktop
                                                                                                                                                                                              • Mobile

                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                              Basic support -- 9.0 (9.0) [1] [*] 9.0 [*] ? --
                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                              Basic support -- 9.0 (9.0) [2] [*] ? ? --

                                                                                                                                                                                              [*] Implements the CSS Fonts Module Level 3 specification. Hence do not support the deprecated wider and narrower keywords.

                                                                                                                                                                                              Tags (5)

                                                                                                                                                                                              Edit tags

                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                               

                                                                                                                                                                                              Attach file

                                                                                                                                                                                              Page last modified 08:31, 15 Oct 2011 by teoli

                                                                                                                                                                                              font-style - MDN

                                                                                                                                                                                                font-style

                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                Summary

                                                                                                                                                                                                The font-style CSS property allows italic or oblique faces to be selected within a font-family.

                                                                                                                                                                                                Syntax

                                                                                                                                                                                                font-style:  normal | italic | oblique | 
                                                                                                                                                                                                inherit
                                                                                                                                                                                                

                                                                                                                                                                                                Values

                                                                                                                                                                                                Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. Oblique faces can be simulated by artificially sloping the glyphs of the regular face.

                                                                                                                                                                                                normal
                                                                                                                                                                                                selects a font that is classified as normal within a font-family
                                                                                                                                                                                                italic
                                                                                                                                                                                                selects a font that is labeled italic, if that is not available, one labeled oblique
                                                                                                                                                                                                oblique
                                                                                                                                                                                                selects a font that is labeled oblique

                                                                                                                                                                                                Example

                                                                                                                                                                                                This paragraph is italic.

                                                                                                                                                                                                This paragraph is oblique.

                                                                                                                                                                                                The above example shows the two font-style values. The CSS looks like this:

                                                                                                                                                                                                p.italic { font-style:italic } 
                                                                                                                                                                                                p.oblique { font-style: oblique }

                                                                                                                                                                                                And the HTML looks like this:

                                                                                                                                                                                                <p class="italic">This paragraph is italic.</p>
                                                                                                                                                                                                <p class="oblique">This paragraph is oblique.</p>

                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                Basic support 1.0 1.0 (1.7 or earlier) 1.0 1.0 3.5 1.0
                                                                                                                                                                                                Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                Basic support 1.0 (1.9.2) ? ? ? ?

                                                                                                                                                                                                Tags (3)

                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                 

                                                                                                                                                                                                Attach file

                                                                                                                                                                                                Page last modified 01:10, 15 Apr 2011 by grendel

                                                                                                                                                                                                font-variant - MDN

                                                                                                                                                                                                  font-variant

                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                  Summary

                                                                                                                                                                                                  The font-variant CSS property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand.

                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                  font-variant:  normal | small-caps | 
                                                                                                                                                                                                  inherit

                                                                                                                                                                                                  Values

                                                                                                                                                                                                  normal
                                                                                                                                                                                                  Specifies a normal font face.
                                                                                                                                                                                                  small-caps
                                                                                                                                                                                                  Specifies a font that is labeled as a small-caps font. If a small-caps font is not available, Mozilla (Firefox) and other browsers will simulate a small-caps font, i.e. by taking a normal font and replacing the lowercase letters by scaled uppercase characters.

                                                                                                                                                                                                  Examples

                                                                                                                                                                                                  p { font-variant: small-caps }

                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                  Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                  Basic support ? ? ? ? ?

                                                                                                                                                                                                  Tags (3)

                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                   

                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                  Page last modified 01:21, 15 Apr 2011 by grendel

                                                                                                                                                                                                  font-weight - MDN

                                                                                                                                                                                                    font-weight

                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                    Summary

                                                                                                                                                                                                    The font-weight property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                    font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

                                                                                                                                                                                                    Values

                                                                                                                                                                                                    normal 
                                                                                                                                                                                                    Normal font weight. Same as 400.
                                                                                                                                                                                                    bold 
                                                                                                                                                                                                    Bold font weight. Same as 700.
                                                                                                                                                                                                    lighter 
                                                                                                                                                                                                    One font weight lighter than the parent element (among the available weights of the font).
                                                                                                                                                                                                    bolder 
                                                                                                                                                                                                    One font weight darker than the parent element (among the available weights of the font).
                                                                                                                                                                                                    100, 200, 300, 400, 500, 600, 700, 800, 900 
                                                                                                                                                                                                    Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

                                                                                                                                                                                                    Examples

                                                                                                                                                                                                    View Live Examples

                                                                                                                                                                                                    /* Set paragraph text to be bold. */
                                                                                                                                                                                                    p {font-weight: bold}
                                                                                                                                                                                                    
                                                                                                                                                                                                    /* Set h1 (level 1 heading) text to one step darker than
                                                                                                                                                                                                       normal but less than a standard bold. */
                                                                                                                                                                                                    h1 {font-weight: 500}
                                                                                                                                                                                                    
                                                                                                                                                                                                    /* Sets text enclosed within span tag to be one step lighter
                                                                                                                                                                                                       than the parent. */
                                                                                                                                                                                                    span {font-weight: lighter}
                                                                                                                                                                                                    

                                                                                                                                                                                                    Notes

                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                    Basic support 2.0 1.0 (1.7 or earlier) 3.0 3.5 1.3
                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                    Basic support 1.0 1.0 (1) 6.0 6.0 3.1

                                                                                                                                                                                                    Tags (2)

                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                     

                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                    Page last modified 12:50, 17 Sep 2011 by McGurk

                                                                                                                                                                                                    height - MDN

                                                                                                                                                                                                      height

                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                      Summary

                                                                                                                                                                                                      The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                      height:  <length> | <percentage> | auto | inherit
                                                                                                                                                                                                      

                                                                                                                                                                                                      Values

                                                                                                                                                                                                      <length>
                                                                                                                                                                                                      See <length> for possible units.
                                                                                                                                                                                                      <percentage>
                                                                                                                                                                                                      The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the value computes to auto. A percentage height on the root element (e.g. <html>) is relative to the viewport.
                                                                                                                                                                                                      auto
                                                                                                                                                                                                      The browser will calculate and select a width for the specified element.

                                                                                                                                                                                                      Examples

                                                                                                                                                                                                      View Live Examples

                                                                                                                                                                                                      table { height: 100%; }
                                                                                                                                                                                                      
                                                                                                                                                                                                      img { height: 200px; }
                                                                                                                                                                                                      
                                                                                                                                                                                                      form { height: auto; }
                                                                                                                                                                                                      
                                                                                                                                                                                                      /* make sure percentage height of body's children works as expected */
                                                                                                                                                                                                      html, body { margin: 0; height: 100%; }
                                                                                                                                                                                                      

                                                                                                                                                                                                      Notes

                                                                                                                                                                                                      The min-height and max-height properties override height.

                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                      Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                                      Tags (3)

                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                       

                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                      Page last modified 11:29, 16 Oct 2011 by teoli

                                                                                                                                                                                                      :hover - MDN

                                                                                                                                                                                                        :hover

                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                        Summary

                                                                                                                                                                                                        The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it.

                                                                                                                                                                                                        Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.

                                                                                                                                                                                                        Usage Note : on touch screens there are no hover possible. The :hover pseudo-class never matches. As touchscreen devices are very common, it is important for web developer not to have content accessible only when hovering over it, as this content would be hidden for users of such devices.

                                                                                                                                                                                                        Examples

                                                                                                                                                                                                        :link:hover { outline: dotted red; }
                                                                                                                                                                                                        
                                                                                                                                                                                                        .foo:hover { background: gold; }

                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                        Browser Lowest Version
                                                                                                                                                                                                        Internet Explorer 4.0  (only for <a>)
                                                                                                                                                                                                        7.0
                                                                                                                                                                                                        Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                        Opera 4.0  (only for <a>)
                                                                                                                                                                                                        7.0
                                                                                                                                                                                                        Safari (WebKit) 2.0.4 (419)
                                                                                                                                                                                                        various bugs before

                                                                                                                                                                                                        Tags (4)

                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                         

                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                        Page last modified 10:50, 21 Sep 2011 by teoli

                                                                                                                                                                                                        hyphens - MDN

                                                                                                                                                                                                          hyphens

                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                          This is an experimental feature
                                                                                                                                                                                                          Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

                                                                                                                                                                                                          Summary

                                                                                                                                                                                                          The hyphens property tells the browser how to go about splitting words to improve the layout of text when line-wrapping.

                                                                                                                                                                                                          Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                          hyphens:  none | manual | auto
                                                                                                                                                                                                          

                                                                                                                                                                                                          Values

                                                                                                                                                                                                          none
                                                                                                                                                                                                          Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.
                                                                                                                                                                                                          manual
                                                                                                                                                                                                          Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See Suggesting line break opportunities for details.
                                                                                                                                                                                                          auto
                                                                                                                                                                                                          The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Suggested line break opportunities, as covered in Suggesting line break opportunities, should be preferred over automatically selecting break points whenever possible.
                                                                                                                                                                                                          Note: The auto setting's behavior depends on the language being properly tagged so that the appropriate hyphenation rules can be selected. You must specify a language using the lang HTML attribute in order to have automatic hyphenation applied.

                                                                                                                                                                                                          Suggesting line break opportunities

                                                                                                                                                                                                          There are two Unicode character that can be used to manually specify potential line break points within text:

                                                                                                                                                                                                          U+2010 (HYPHEN)
                                                                                                                                                                                                          The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
                                                                                                                                                                                                          U+00AD (SHY)
                                                                                                                                                                                                          An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use &shy; to insert a soft hyphen.

                                                                                                                                                                                                          Example

                                                                                                                                                                                                          This CSS snippet creates three classes, one for each possible configuration of the hyphens property.

                                                                                                                                                                                                          p.none {
                                                                                                                                                                                                            -moz-hyphens: none;
                                                                                                                                                                                                            hyphens: none;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          p.manual {
                                                                                                                                                                                                            -moz-hyphens: manual;
                                                                                                                                                                                                            hyphens: manual;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          p.auto {
                                                                                                                                                                                                            -moz-hyphens: auto;
                                                                                                                                                                                                            hyphens: auto;
                                                                                                                                                                                                          }

                                                                                                                                                                                                          Take a look at the live example to see these configurations in action; resize the window while looking at them to see them in action.

                                                                                                                                                                                                          View the live example

                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                          Basic support ?

                                                                                                                                                                                                          6.0 (6.0) -moz

                                                                                                                                                                                                          Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Gecko. See this note for a complete list of such languages.

                                                                                                                                                                                                          ? ?

                                                                                                                                                                                                          5.1 -webkit

                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                          Basic support ?

                                                                                                                                                                                                          6.0 (6.0) -moz

                                                                                                                                                                                                          Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Gecko. See this note for a complete list of such languages.

                                                                                                                                                                                                          ? ? ?

                                                                                                                                                                                                          Gecko notes

                                                                                                                                                                                                          Gecko (Firefox) supplies hyphenation dictionaries for the following languages:

                                                                                                                                                                                                          • Afrikaans (af) Requires Gecko 8.0
                                                                                                                                                                                                          • Bulgarian (bg) Requires Gecko 8.0
                                                                                                                                                                                                          • Catalan (ca) Requires Gecko 8.0
                                                                                                                                                                                                          • Swiss German, Traditional Orthography (de-CH) Requires Gecko 8.0
                                                                                                                                                                                                          • Danish (da) Requires Gecko 8.0
                                                                                                                                                                                                          • Dutch (nl) Requires Gecko 8.0
                                                                                                                                                                                                          • English, United States (en-US) Requires Gecko 6.0
                                                                                                                                                                                                          • Esperanto (eo) Requires Gecko 8.0
                                                                                                                                                                                                          • Estonian (et) Requires Gecko 8.0
                                                                                                                                                                                                          • Finnish (fi) Requires Gecko 8.0
                                                                                                                                                                                                          • French (fr) Requires Gecko 8.0
                                                                                                                                                                                                          • Galician (gl) Requires Gecko 9.0
                                                                                                                                                                                                          • German, Traditional Orthography (de-1901) Requires Gecko 8.0
                                                                                                                                                                                                          • German, Reformed Orthography (de-1996) Requires Gecko 8.0
                                                                                                                                                                                                          • Hungarian (hu) Requires Gecko 9.0
                                                                                                                                                                                                          • Icelandic (is) Requires Gecko 8.0
                                                                                                                                                                                                          • Interlingua (ia) Requires Gecko 8.0
                                                                                                                                                                                                          • Italian (it) Requires Gecko 9.0
                                                                                                                                                                                                          • Kurmanji (kmr) Requires Gecko 8.0
                                                                                                                                                                                                          • Latin (la) Requires Gecko 8.0
                                                                                                                                                                                                          • Lithuanian (lt) Requires Gecko 8.0
                                                                                                                                                                                                          • Mongolian (mn) Requires Gecko 8.0
                                                                                                                                                                                                          • Norwegian Bokmål (nb) Requires Gecko 8.0
                                                                                                                                                                                                          • Norwegian Nynorsk (nn) Requires Gecko 8.0
                                                                                                                                                                                                          • Portuguese (pt) Requires Gecko 8.0
                                                                                                                                                                                                          • Russian (ru) Requires Gecko 8.0
                                                                                                                                                                                                          • Serbo-Croatian (sh) Requires Gecko 8.0
                                                                                                                                                                                                          • Slovenian (sl) Requires Gecko 8.0
                                                                                                                                                                                                          • Spanish (es) Requires Gecko 8.0
                                                                                                                                                                                                          • Swedish (sv) Requires Gecko 8.0
                                                                                                                                                                                                          • Turkish (tr) Requires Gecko 9.0
                                                                                                                                                                                                          • Ukrainian (uk) Requires Gecko 9.0
                                                                                                                                                                                                          • Upper Sorbian (hsb) Requires Gecko 8.0
                                                                                                                                                                                                          • Welsh (cy) Requires Gecko 8.0

                                                                                                                                                                                                          See also

                                                                                                                                                                                                          content

                                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                           

                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                          Page last modified 11:32, 7 Sep 2011 by teoli

                                                                                                                                                                                                          image-rendering - MDN

                                                                                                                                                                                                            image-rendering

                                                                                                                                                                                                            Summary

                                                                                                                                                                                                            The image-rendering property provides a hint to the user agent about how to handle its image rendering.
                                                                                                                                                                                                            image-rendering applies to scaled images (and other elements, see below). For example, if the natural size of the image is 100×100px but the page author specifies the dimensions to 200×200px (or 50×50px), then the image will be upscaled (or downscaled) to the new dimensions using the specified algorithm. Scaling may also apply due to user interaction (zooming).

                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            image-rendering:  auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges | -o-crisp-edges 

                                                                                                                                                                                                            Values

                                                                                                                                                                                                            auto
                                                                                                                                                                                                            Default value, depends on the user agent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
                                                                                                                                                                                                            optimizeQuality
                                                                                                                                                                                                            Indicates that the user agent shall emphasize quality over rendering speed. Gecko uses bilinear resampling (high quality).
                                                                                                                                                                                                            optimizeSpeed
                                                                                                                                                                                                            The user agent should use a resampling algorithm which achieves the goal of fast rendering. Currently Gecko (Firefox) uses nearest neighbor resampling (low quality).
                                                                                                                                                                                                            -moz-crisp-edges | -o-crisp-edges
                                                                                                                                                                                                            Mozilla extension. Gecko (Firefox) always uses nearest neighbor resampling (low quality). Use this value to avoid upscaled images with sharp edges getting blurry. bug 423756 .
                                                                                                                                                                                                            -webkit-optimize-contrast
                                                                                                                                                                                                            WebKit extension ( WebKit bug 56627). WebKit uses a pixelation-generating resampling. The algorithm for now seems to be nearest-neighbor, but this can be WebKit-port specific, and there are other algorithms that can be used as well. Use this value to avoid upscaled images with sharp edges getting blurry.
                                                                                                                                                                                                            • Currently auto and optimizeQuality are equal by default, both result in bilinear resampling.
                                                                                                                                                                                                            • Currently optimizeSpeed and -moz-crisp-edges are equal, both result in nearest neighbor resampling.
                                                                                                                                                                                                            • Warning: Unlike the gecko rendering engine, optimizeSpeed and -webkit-optimize-contrast do not mean the same thing in WebKit.

                                                                                                                                                                                                            Examples

                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            img  { 
                                                                                                                                                                                                                   image-rendering: optimizeQuality;  /* Firefox 3.6+; default behavior is identical, no need to specify */
                                                                                                                                                                                                                   -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0; default in IE8+ */
                                                                                                                                                                                                                 }
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            /* applies to GIF and PNG images; avoids blurry edges */
                                                                                                                                                                                                            
                                                                                                                                                                                                            img[src$=".gif"], img[src$=".png"] {
                                                                                                                                                                                                            
                                                                                                                                                                                                                               image-rendering: -moz-crisp-edges;         /* Firefox */
                                                                                                                                                                                                                               -ms-interpolation-mode: nearest-neighbor;  /* IE */
                                                                                                                                                                                                                             }
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            html  { image-rendering: -moz-crisp-edges; }        /* all images, videos, background-images */
                                                                                                                                                                                                            img   { -ms-interpolation-mode: nearest-neighbor; } /* all images, IE */
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            div { 
                                                                                                                                                                                                                    background: url(chessboard.gif) no-repeat 50% 50%;
                                                                                                                                                                                                                    image-rendering: -moz-crisp-edges;
                                                                                                                                                                                                            }
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            
                                                                                                                                                                                                            video { image-rendering: optimizeSpeed; }

                                                                                                                                                                                                            Live Examples

                                                                                                                                                                                                            image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;
                                                                                                                                                                                                            78%squares.gif 100%squares.gif 138%squares.gif downsizedhut.jpg upsizedblumen.jpg

                                                                                                                                                                                                            image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;
                                                                                                                                                                                                            78%squares.gif 100%squares.gif 138%squares.gif downsizedhut.jpg upsizedblumen.jpg

                                                                                                                                                                                                            Notes

                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                            Basic support

                                                                                                                                                                                                            --

                                                                                                                                                                                                            Note: Should get the landed -webkit-optimize-contrast WebKit patch soon.

                                                                                                                                                                                                            3.6 (1.9.2)
                                                                                                                                                                                                            image-rendering
                                                                                                                                                                                                            7.0
                                                                                                                                                                                                            -ms-interpolation-mode: bicubic | nearest-neighbor
                                                                                                                                                                                                            • applies only to images (JPG, GIF, PNG, ...)
                                                                                                                                                                                                            • in IE7 only for images without transparency
                                                                                                                                                                                                            • does not inherit
                                                                                                                                                                                                            • default value IE7: nearest-neighbor (low quality)
                                                                                                                                                                                                            • default value IE8+: bicubic    (high quality)

                                                                                                                                                                                                            11.60

                                                                                                                                                                                                            image-rendering: auto | -o-crisp-edges | optimizeSpeed | optimizeQuality

                                                                                                                                                                                                            6533.21.1, r86920

                                                                                                                                                                                                            image-rendering: auto | optimizeSpeed | optimizeQuality | -webkit-optimize-contrast

                                                                                                                                                                                                            • -webkit-optimize-contrast is similar to -moz-crisp-edges, in that it selects the pixelation algorithm over the blurry algorithm for scaling. Pixelated scaling algorithm for now seems to be nearest-neighbor.
                                                                                                                                                                                                            • -webkit-optimize-contrast implemented in the WebKit nightlies as of May 20th, 2011.
                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                                            See also  Microsoft MSDN -ms-interpolation-mode property

                                                                                                                                                                                                            Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual imageData manipulation.

                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                            image-rendering is an SVG property, it is not defined in any CSS standard. Gecko (Firefox)and Presto (Opera) apply it also to HTML and XML content.

                                                                                                                                                                                                            SVG 1.1 Painting #image-rendering

                                                                                                                                                                                                            Tags (6)

                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                            Attachments (3)

                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                            Page last modified 22:31, 10 Nov 2011 by nimbu

                                                                                                                                                                                                            ime-mode - MDN

                                                                                                                                                                                                              ime-mode

                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                              Summary

                                                                                                                                                                                                              The ime-mode CSS property controls the state of the input method editor for text fields.

                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                              ime-mode:  auto | normal | active | inactive | disabled

                                                                                                                                                                                                              Values

                                                                                                                                                                                                              auto
                                                                                                                                                                                                              No change is made to the current input method editor state. This is the default.
                                                                                                                                                                                                              normal
                                                                                                                                                                                                              The IME state should be normal; this value can be used in a user style sheet to override the page setting. This value is not supported by Internet Explorer.
                                                                                                                                                                                                              active
                                                                                                                                                                                                              The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it. Not supported on Linux.
                                                                                                                                                                                                              inactive
                                                                                                                                                                                                              The input method editor is initially inactive, but the user may activate it if they wish. Not supported on Linux.
                                                                                                                                                                                                              disabled
                                                                                                                                                                                                              The input method editor is disabled and may not be activated by the user.

                                                                                                                                                                                                              Examples

                                                                                                                                                                                                              <input type="text" name="name" value="initial value" style="ime-mode: disabled">

                                                                                                                                                                                                              This example disables input method support for a field; this might be necessary for fields that enter data into a database that doesn't support extended character sets, for example.

                                                                                                                                                                                                              Notes

                                                                                                                                                                                                              Unlike in Internet Explorer, the Firefox implementation of ime-mode allows this property to apply to password editing fields. However, this does not make for an ideal user experience, and password fields should disable the IME. Users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following CSS into their user CSS file:

                                                                                                                                                                                                              input[type=password] {
                                                                                                                                                                                                                  ime-mode: auto !important;
                                                                                                                                                                                                              }

                                                                                                                                                                                                              Note: In general, it's not appropriate for a public web site to manipulate the IME mode setting. This property should be used for web applications and the like.

                                                                                                                                                                                                              The Macintosh version of Gecko 1.9 (Firefox 3) can't recover the previous state of the IME when a field for which it is disabled loses focus, so Mac users may get grumpy when you use the disabled value.

                                                                                                                                                                                                              Note: Don't rely on disabling IME to prevent extended characters from passing through your form. Even with IME disabled, users can still paste extended characters into your form's fields.

                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                              It was introduced by Microsoft with IE5 as a proprietary extension.

                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                              Basic support -- 3.0 (1.9) 5.0 -- --
                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                              Basic support ? ? ? ? ?

                                                                                                                                                                                                              IE8 introduced -ms-ime-mode as a synonym for ime-mode. Don't use the -ms- prefix.

                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                               

                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                              Page last modified 02:22, 19 Aug 2011 by myakura

                                                                                                                                                                                                              @import - MDN

                                                                                                                                                                                                                @import

                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules.

                                                                                                                                                                                                                So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URI. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                @import url;                      or
                                                                                                                                                                                                                @import url list-of-media-queries;
                                                                                                                                                                                                                

                                                                                                                                                                                                                where :

                                                                                                                                                                                                                url
                                                                                                                                                                                                                Is a <string> or a <uri> representing the location of the resource to import. The url may be an absolute or relative url.
                                                                                                                                                                                                                list-of-media-queries
                                                                                                                                                                                                                Is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url. If the browser doesn't support any of these media types, it won't even load the linked resource.

                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                @import url("fineprint.css") print;
                                                                                                                                                                                                                @import url("bluish.css") projection, tv;
                                                                                                                                                                                                                @import 'custom.css';
                                                                                                                                                                                                                @import "common.css" screen, projection;
                                                                                                                                                                                                                @import url('landscape.css') screen and (orientation:landscape);
                                                                                                                                                                                                                

                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                Specification Status Comment
                                                                                                                                                                                                                Media Queries Candidate Recommandation Extended the syntax to support any media query and not only simple media types.
                                                                                                                                                                                                                CSS Level 2 (Revision 1) Recommendation Added support for <string> to denote the url of a stylesheet,
                                                                                                                                                                                                                and requirement to insert the @import rule at the beginning of the CSS document.
                                                                                                                                                                                                                CSS Level 1 Recommendation  

                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                Basic support (Supported) (Supported) 5.5 [1] (Supported) (Supported)
                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                Basic support (Supported) (Supported) 5.5 [2] (Supported) (Supported)

                                                                                                                                                                                                                See also

                                                                                                                                                                                                                Tags (2)

                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                 

                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                Page last modified 14:30, 29 Oct 2011 by teoli

                                                                                                                                                                                                                :indeterminate - MDN

                                                                                                                                                                                                                  :indeterminate

                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                  The :indeterminate CSS pseudo-class represents any <input type="checkbox"> element whose indeterminate DOM property is set to true by JavaScript. In addition, in some browsers, it can be used to match to <progress> elements in an indeterminate state.

                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                  W3C CSS3 Selectors test#177

                                                                                                                                                                                                                  <style>
                                                                                                                                                                                                                         input, span { background: red }
                                                                                                                                                                                                                         :indeterminate, :indeterminate + span { background: limegreen }
                                                                                                                                                                                                                  </style>
                                                                                                                                                                                                                  
                                                                                                                                                                                                                  <p><input type=checkbox> <span>Everything in this paragraph should have a green background.</span></p>
                                                                                                                                                                                                                  
                                                                                                                                                                                                                  <script> document.getElementsByTagName("input")[0].indeterminate = true; </script>
                                                                                                                                                                                                                  

                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                  Checkboxes (Supported) 3.6 (1.9.2) 9.0 10.60 (2.6) 3.0
                                                                                                                                                                                                                  <progress> ? 6.0 (6.0) ? ? ?
                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                  Checkboxes ? 1.0 (1.9.2) ? ? ?
                                                                                                                                                                                                                  <progress> ? 6.0 (6.0) ? ? ?

                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                   

                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                  Page last modified 12:35, 21 Sep 2011 by teoli

                                                                                                                                                                                                                  inherit - MDN

                                                                                                                                                                                                                    inherit

                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                    The inherit value is allowed on every CSS property. It causes the element for which it is specified to take the Computed value of the property from its parent element.

                                                                                                                                                                                                                    For inherited properties

                                                                                                                                                                                                                    For inherited properties, this reinforces the default behavior, and is only needed to override another rule. For example:

                                                                                                                                                                                                                     /* make second-level headers green */
                                                                                                                                                                                                                     h2 { color: green; }
                                                                                                                                                                                                                    
                                                                                                                                                                                                                     /* ...but leave those in the sidebar alone so they use their parent's color */
                                                                                                                                                                                                                     #sidebar h2 { color: inherit; }
                                                                                                                                                                                                                    

                                                                                                                                                                                                                    Note that in this example the h2 elements inside the sidebar might be different colors. For example, if one of them were the child of a div matched by the rule

                                                                                                                                                                                                                     div#current { color: blue; }
                                                                                                                                                                                                                    

                                                                                                                                                                                                                    it would be blue.

                                                                                                                                                                                                                    For non-inherited properties

                                                                                                                                                                                                                    For non-inherited properties, this specifies a behavior that typically makes relatively little sense.

                                                                                                                                                                                                                    Notes

                                                                                                                                                                                                                    Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                    Specification Status Comment
                                                                                                                                                                                                                    CSS Values and Units Level 3 Working Draft No significant change from CSS Level 2 (Revision 1)
                                                                                                                                                                                                                    CSS Level 2 (Revision 1) Recommendation  

                                                                                                                                                                                                                    Browser Compatibility

                                                                                                                                                                                                                    Browser Lowest Version
                                                                                                                                                                                                                    Internet Explorer 8.0
                                                                                                                                                                                                                    Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                    Opera 4.0-7.0
                                                                                                                                                                                                                    Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                    Inheritance, initial

                                                                                                                                                                                                                    Tags (2)

                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                     

                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                    Page last modified 16:54, 26 Sep 2011 by teoli

                                                                                                                                                                                                                    initial | -moz-initial - MDN

                                                                                                                                                                                                                      initial | -moz-initial

                                                                                                                                                                                                                      « CSS « CSS Reference « CSS Reference:Mozilla Extensions

                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                      The -moz-initial CSS keyword is a Mozilla implementation of CSS3 initial. Applies the initial value of a property to an element.

                                                                                                                                                                                                                      -moz-initial (initial) is allowed on every CSS property. It causes the element for which it is specified to use the initial value of the property.

                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                       /* give headers a green border */
                                                                                                                                                                                                                       h2 { border: medium solid green }
                                                                                                                                                                                                                      
                                                                                                                                                                                                                       /* but make those in the sidebar use the value of the "color" property */
                                                                                                                                                                                                                       #sidebar h2 { border-color: -moz-initial; border-color: initial; }
                                                                                                                                                                                                                      
                                                                                                                                                                                                                       <p style="color:red"> 
                                                                                                                                                                                                                          this text is red 
                                                                                                                                                                                                                             <em style="color:-moz-initial; color:initial"> 
                                                                                                                                                                                                                                this text is in the initial color (e.g. black)
                                                                                                                                                                                                                             </em>
                                                                                                                                                                                                                          this is red again
                                                                                                                                                                                                                       </p>
                                                                                                                                                                                                                      

                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                      Browser Lowest version Support of
                                                                                                                                                                                                                      Internet Explorer --- ---
                                                                                                                                                                                                                      Firefox (Gecko) 1.0-3.0 (1.0-1.9) [*] -moz-initial
                                                                                                                                                                                                                      Opera --- ---
                                                                                                                                                                                                                      Safari (WebKit) 1.2 (125) initial

                                                                                                                                                                                                                      [*] Increasing support in each version, almost complete in Firefox 3.0

                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                      Specification Status Comment
                                                                                                                                                                                                                      CSS Values and Units Level 3 Working Draft Defines the keyword
                                                                                                                                                                                                                      CSS Cascade And Inheritance Level 3 Working Draft Defines what an initial value is

                                                                                                                                                                                                                      Tags (2)

                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                       

                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                      Page last modified 07:57, 3 Nov 2011 by teoli

                                                                                                                                                                                                                      :invalid - MDN

                                                                                                                                                                                                                        :invalid

                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                        Introduced in Gecko 2.0

                                                                                                                                                                                                                        (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                        The :invalid pseudo-class represents any <input> element whose content fails to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.

                                                                                                                                                                                                                        By default, Gecko does not apply a style to the :invalid pseudo-class. However it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.

                                                                                                                                                                                                                        You can disable the glow using the following CSS, or completely override it to alter the appearance of invalid fields.

                                                                                                                                                                                                                        :invalid {
                                                                                                                                                                                                                          box-shadow: none;
                                                                                                                                                                                                                        }
                                                                                                                                                                                                                        
                                                                                                                                                                                                                        :-moz-submit-invalid {
                                                                                                                                                                                                                          box-shadow: none;
                                                                                                                                                                                                                        }
                                                                                                                                                                                                                        
                                                                                                                                                                                                                        :-moz-ui-invalid {
                                                                                                                                                                                                                          box-shadow:none;
                                                                                                                                                                                                                        }

                                                                                                                                                                                                                        Notes

                                                                                                                                                                                                                        Radio buttons

                                                                                                                                                                                                                        If any of the radio buttons in a group (that is, with the same value for their name attribute) is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group are selected.

                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                        This example presents a simple form that colors elements green when they validate and red when they don't.

                                                                                                                                                                                                                        <style type="text/css">
                                                                                                                                                                                                                          :invalid {
                                                                                                                                                                                                                            background-color: #ffdddd;
                                                                                                                                                                                                                          }
                                                                                                                                                                                                                          
                                                                                                                                                                                                                          :valid {
                                                                                                                                                                                                                            background-color: #ddffdd;
                                                                                                                                                                                                                          }
                                                                                                                                                                                                                          
                                                                                                                                                                                                                          :required {
                                                                                                                                                                                                                            border-color: #800000;
                                                                                                                                                                                                                            border-width: 3px;
                                                                                                                                                                                                                          }
                                                                                                                                                                                                                        </style>
                                                                                                                                                                                                                        
                                                                                                                                                                                                                        <form>
                                                                                                                                                                                                                          <label>Enter a URL:</label>
                                                                                                                                                                                                                          <input type="url" />
                                                                                                                                                                                                                          <br />
                                                                                                                                                                                                                          <br />
                                                                                                                                                                                                                          <label>Enter an email address:</label>
                                                                                                                                                                                                                          <input type="email" required/>
                                                                                                                                                                                                                        </form>

                                                                                                                                                                                                                        View this sample live.

                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                        Browser Lowest version
                                                                                                                                                                                                                        Internet Explorer ---
                                                                                                                                                                                                                        Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                        Opera 9.5

                                                                                                                                                                                                                        Safari | Chrome | WebKit

                                                                                                                                                                                                                        5 | 8 | 534.10

                                                                                                                                                                                                                        Tags (5)

                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                         

                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                        Page last modified 12:54, 21 Sep 2011 by teoli

                                                                                                                                                                                                                        @keyframes - MDN

                                                                                                                                                                                                                          @keyframes

                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                          @keyframes lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.

                                                                                                                                                                                                                          To use keyframes, you create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe list. Each @keyframes rule contains a style list of keyframe selectors, each of which is comprised of a percentage along the animation at which the keyframe occurs as well as a block containing the style information for that keyframe.

                                                                                                                                                                                                                          You can list the keyframes in any order; they will be handled in the order in which their specified percentages indicate they should occur.

                                                                                                                                                                                                                          Valid keyframe lists

                                                                                                                                                                                                                          In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.

                                                                                                                                                                                                                          If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.

                                                                                                                                                                                                                          Duplicate resolution

                                                                                                                                                                                                                          If multiple keyframe sets exist for a given name, the last one encountered is used. @keyframes rules don't cascade, so animations never drive keyframes from more than one rule set.

                                                                                                                                                                                                                          If a given animation time offset is duplicated, the last keyframe in the @keyframes rule for that percentage is used for that frame. There's no cascading within a @keyframes rule if multiple keyframes specify the same percentage values.

                                                                                                                                                                                                                          When properties are left out of some keyframes

                                                                                                                                                                                                                          Any properties that you don't specify in every keyframe are interpolated (with the exception of those that can't be interpolated, which are instead dropped from the animation entirely). For example:

                                                                                                                                                                                                                          @keyframes identifier {
                                                                                                                                                                                                                            0% { top: 0; left: 0; }
                                                                                                                                                                                                                            30% { top: 50px; }
                                                                                                                                                                                                                            68%, 72% { left: 50px; }
                                                                                                                                                                                                                            100% { top: 100px; left: 100%; }
                                                                                                                                                                                                                          }

                                                                                                                                                                                                                          Here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 70%, and 100% keyframes.

                                                                                                                                                                                                                          Only properties that are specified in both the 0% and 100% keyframes will be animated; any property not included in both of those keyframes will retain their starting value for the duration of the animation sequence.

                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                          @keyframes <identifier> {
                                                                                                                                                                                                                            [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
                                                                                                                                                                                                                          }
                                                                                                                                                                                                                          

                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                          <identifier>
                                                                                                                                                                                                                          A name identifying the keyframe list. This must match the identifier production in CSS syntax.
                                                                                                                                                                                                                          from
                                                                                                                                                                                                                          A starting offset of 0%.
                                                                                                                                                                                                                          to
                                                                                                                                                                                                                          An ending offset of 100%.
                                                                                                                                                                                                                          <percentage>
                                                                                                                                                                                                                          A percentage of the time through the animation sequence at which the specified keyframe should occur.

                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                          See CSS animations for examples.

                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                          Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                          Tags (6)

                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                           

                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                          Page last modified 12:13, 25 Oct 2011 by teoli

                                                                                                                                                                                                                          :lang - MDN

                                                                                                                                                                                                                            :lang

                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                            The :lang(language-code pseudo-class matches elements based on the langauge the element is determined to be in. In HTML, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language.

                                                                                                                                                                                                                            Acceptable language-code strings are specified in in HTML 4.0 specification.

                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                            element:lang(language-code) { style properties }
                                                                                                                                                                                                                            

                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                            In this example, the lang selector is used to match on the parent of a quote element using child selectors. Its not meant to demonstrate the only way to do this, or even the correct way (which would depend on the type of document). Note, Unicode values are used to specify special quote characters.

                                                                                                                                                                                                                            :lang(en) > Q { quotes: '\201C' '\201D' '\2018' '\2019'; }
                                                                                                                                                                                                                            :lang(fr) > Q { quotes: '« ' ' »'; }
                                                                                                                                                                                                                            :lang(de) > Q { quotes: '»' '«' '\2039' '\203A'; }

                                                                                                                                                                                                                            ...where...

                                                                                                                                                                                                                            <div lang="fr"><q>This French quote has a <q>nested</q> quote.</q></div>
                                                                                                                                                                                                                              <div lang="de"><q>This German quote has a <q>nested</q> quote.</q></div>
                                                                                                                                                                                                                              <div lang="en"><q>This English quote has a <q>nested</q> quote.</q></div>

                                                                                                                                                                                                                            ... should look like ...
                                                                                                                                                                                                                            «This French quote has a «nested» quote.»
                                                                                                                                                                                                                            »This German quote has a ‹nested› quote.«
                                                                                                                                                                                                                            “This English quote has a ‘nested’ quote.”

                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                            Browser lowest version
                                                                                                                                                                                                                            Internet Explorer 8.0
                                                                                                                                                                                                                            Firefox (Gecko) 1.0 (1.2)
                                                                                                                                                                                                                            Opera 8.0
                                                                                                                                                                                                                            Safari (WebKit) 3.1 (525)

                                                                                                                                                                                                                            Related Pages

                                                                                                                                                                                                                            Tags (4)

                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                             

                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                            Page last modified 10:56, 21 Sep 2011 by teoli

                                                                                                                                                                                                                            :last-child - MDN

                                                                                                                                                                                                                              :last-child

                                                                                                                                                                                                                              Table of contents

                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                              3. 3. Examples
                                                                                                                                                                                                                              4. 4. Notes
                                                                                                                                                                                                                              Table of contents
                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                              3. 3. Examples
                                                                                                                                                                                                                              4. 4. Notes

                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                              The :last-child pseudo-class represents any element that is the last child element of its parent.

                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                              element:last-child { style properties }
                                                                                                                                                                                                                              

                                                                                                                                                                                                                                

                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                              span:last-child
                                                                                                                                                                                                                              {
                                                                                                                                                                                                                                  background-color: lime;
                                                                                                                                                                                                                              }

                                                                                                                                                                                                                              ...where...

                                                                                                                                                                                                                              <div>
                                                                                                                                                                                                                                  <span>This span is not limed.</span>
                                                                                                                                                                                                                                  <span>This span is! :)</span>
                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                              ... should look like ...
                                                                                                                                                                                                                              This span is not limed. This span is! :)

                                                                                                                                                                                                                              Notes

                                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                               

                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                              Page last modified 11:52, 21 Sep 2011 by teoli

                                                                                                                                                                                                                              :last-of-type - MDN

                                                                                                                                                                                                                                :last-of-type

                                                                                                                                                                                                                                Table of contents

                                                                                                                                                                                                                                1. 1. Summary
                                                                                                                                                                                                                                2. 2. Syntax
                                                                                                                                                                                                                                3. 3. Example
                                                                                                                                                                                                                                4. 4. See also
                                                                                                                                                                                                                                Table of contents
                                                                                                                                                                                                                                1. 1. Summary
                                                                                                                                                                                                                                2. 2. Syntax
                                                                                                                                                                                                                                3. 3. Example
                                                                                                                                                                                                                                4. 4. See also

                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                The :last-of-type pseudo-class represents the last sibling of the given type in the list of children of its parent element.

                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                element:last-of-type { style properties }
                                                                                                                                                                                                                                

                                                                                                                                                                                                                                Example

                                                                                                                                                                                                                                To match the last data cell in a table row, you can use this:

                                                                                                                                                                                                                                tr > td:last-of-type

                                                                                                                                                                                                                                Tags (4)

                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                Page last modified 11:57, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                :left - MDN

                                                                                                                                                                                                                                  :left

                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                  The :left page pseudo-class matches any left page when printing a page. It allows to describe the styling of left-side pages.

                                                                                                                                                                                                                                  Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page and if it has a major writing direction of right-to-left then it will be a :left page.

                                                                                                                                                                                                                                  Note: You can't change all CSS properties. You can only change the the margin, padding, border, and background properties of the page box. All other CSS properties will be ignored, and only the page box, not the document content on the page, will be affected.

                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                  @page :left {
                                                                                                                                                                                                                                    margin:2in 3in;
                                                                                                                                                                                                                                  } 
                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                  Feature Gecko Webkit Internet Explorer Opera
                                                                                                                                                                                                                                  Basic support -- ? 8 9.2

                                                                                                                                                                                                                                  See also

                                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                  Page last modified 20:54, 19 Oct 2011 by Sheppy

                                                                                                                                                                                                                                  left - MDN

                                                                                                                                                                                                                                    left

                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                    The left property specifies part of the position of positioned elements.

                                                                                                                                                                                                                                    For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                    left: <length> | <percentage> | auto | inherit ;
                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                    <length> 
                                                                                                                                                                                                                                    A length, can be negative, zero, or positive.
                                                                                                                                                                                                                                    <percentage> 
                                                                                                                                                                                                                                    A percentage of the containing block's width.

                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                    View the live example

                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                    #example_3 {
                                                                                                                                                                                                                                      width: 600px;
                                                                                                                                                                                                                                      height: 400px;
                                                                                                                                                                                                                                      background-color: #FFC7E4;
                                                                                                                                                                                                                                      position: relative;
                                                                                                                                                                                                                                      top: 20px;
                                                                                                                                                                                                                                      left: 20px;
                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                    #example_4 {
                                                                                                                                                                                                                                      width:200px;
                                                                                                                                                                                                                                      height:200px;
                                                                                                                                                                                                                                      background-color: #FFD7C2;
                                                                                                                                                                                                                                      position:absolute;
                                                                                                                                                                                                                                      bottom:10px;
                                                                                                                                                                                                                                      right: 20px;
                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                    Notes

                                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                    Basic support 1.0 1.0 (1.7 or earlier) 5.5 5 1.0
                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                                                                                                    See also

                                                                                                                                                                                                                                    position, top, right, bottom

                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                    Page last modified 22:13, 20 Apr 2011 by grendel

                                                                                                                                                                                                                                    letter-spacing - MDN

                                                                                                                                                                                                                                      letter-spacing

                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                      The letter-spacing CSS property specifies spacing behavior between text characters.

                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                      letter-spacing:  normal | <length>
                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                      Values

                                                                                                                                                                                                                                      normal
                                                                                                                                                                                                                                      The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text. That's the difference to the length value 0.
                                                                                                                                                                                                                                      <length>
                                                                                                                                                                                                                                      Indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
                                                                                                                                                                                                                                      See <length> values for possible units.

                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                      Having a css style of:

                                                                                                                                                                                                                                      p { letter-spacing: 0.4em }

                                                                                                                                                                                                                                      and a webpage with the code:

                                                                                                                                                                                                                                      <p> letter spacing </p>

                                                                                                                                                                                                                                      will produce the following:

                                                                                                                                                                                                                                      letter spacing
                                                                                                                                                                                                                                      


                                                                                                                                                                                                                                      Here are some more letter spacing examples:

                                                                                                                                                                                                                                      letter-spacing: 0.1em
                                                                                                                                                                                                                                      letter-spacing: 0.5em
                                                                                                                                                                                                                                      letter-spacing: 0.8em
                                                                                                                                                                                                                                      letter-spacing: 1em
                                                                                                                                                                                                                                      letter-spacing: -0.05em
                                                                                                                                                                                                                                      letter-spacing: 6px
                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                      HTML support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                      SVG support (Supported) -- ( bug 371787 ) ? (Supported) (Supported)
                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                      HTML support ? ? ? ? ?
                                                                                                                                                                                                                                      SVG support ? ? ? ? ?

                                                                                                                                                                                                                                      Tags (5)

                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                      Page last modified 21:40, 22 Sep 2011 by syssgx

                                                                                                                                                                                                                                      line-height - MDN

                                                                                                                                                                                                                                        line-height

                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                        On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
                                                                                                                                                                                                                                        On block level elements, line-height specifies the minimal height of line boxes within the element.

                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                        line-height:  normal | 
                                                                                                                                                                                                                                        <number> | 
                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                        <length> | 
                                                                                                                                                                                                                                        <percentage>
                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                        normal
                                                                                                                                                                                                                                        Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.
                                                                                                                                                                                                                                        <number>
                                                                                                                                                                                                                                        The used value is this unitless <number> multiplied by the element's font size. The computed value is the same as the specified <number>. In most cases this is is the preferred way to set line-height with no unexpected results in case of inheritance.
                                                                                                                                                                                                                                        <length>
                                                                                                                                                                                                                                        The specified <length> is used in the calculation of the line box height. See <length> values for possible units.
                                                                                                                                                                                                                                        <percentage>
                                                                                                                                                                                                                                        Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size.
                                                                                                                                                                                                                                        Percentage and em values may have unexpected results, see "Notes" section.

                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                        /* All rules below have the same resultant line height */
                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                        div { line-height: 1.2;   font-size: 10pt }   /* number */ 
                                                                                                                                                                                                                                        div { line-height: 1.2em; font-size: 10pt }   /* length */ 
                                                                                                                                                                                                                                        div { line-height: 120%;  font-size: 10pt }   /* percentage */
                                                                                                                                                                                                                                        div { line-height: 12pt;  font-size: 10pt }   /* length */
                                                                                                                                                                                                                                        div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

                                                                                                                                                                                                                                        Notes

                                                                                                                                                                                                                                        • It is often more convenient to set line-height by using the font shortcut as stated in the "Examples" section above.
                                                                                                                                                                                                                                        • Prefer a unitless number:
                                                                                                                                                                                                                                          <style>
                                                                                                                                                                                                                                                .green { font-size: 15px;  line-height: 1.1;  border: solid limegreen; }
                                                                                                                                                                                                                                                .red   { font-size: 15px;  line-height: 1.1em;  border: solid red; }
                                                                                                                                                                                                                                                h1     { font-size: 30px; }
                                                                                                                                                                                                                                                div    { width: 19em;  display: inline-block; }
                                                                                                                                                                                                                                          </style>
                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                          <div class=green>
                                                                                                                                                                                                                                           <h1>Avoid unexpected results by using unitless line-height</h1>
                                                                                                                                                                                                                                            length and percentage line-heights have poor inheritance behavior ...
                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                          <div class=red>
                                                                                                                                                                                                                                           <h1>Avoid unexpected results by using unitless line-height</h1>
                                                                                                                                                                                                                                            length and percentage line-heights have poor inheritance behavior ...
                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                          <!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> 
                                                                                                                                                                                                                                          <!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->
                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                          Avoid unexpected results, use unitless line-height!

                                                                                                                                                                                                                                          em values and <percentage> line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as "1.1").

                                                                                                                                                                                                                                          Avoid unexpected results, use unitless line-height!

                                                                                                                                                                                                                                          em values and <percentage> line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as "1.1").

                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                        Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                                                                        See also

                                                                                                                                                                                                                                        font, font-size

                                                                                                                                                                                                                                        Tags (3)

                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                        Page last modified 05:40, 15 Apr 2011 by grendel

                                                                                                                                                                                                                                        :link - MDN

                                                                                                                                                                                                                                          :link

                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                          The :link pseudo-class lets you select only links that have not yet been visited.

                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                          a:link {color:slaygrate;}
                                                                                                                                                                                                                                          .external:link {background-color:lightblue;}

                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                          Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                          Basic support 1.5 1.0 (1.9.2) ? ? 3.2

                                                                                                                                                                                                                                          Tags (2)

                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                          Page last modified 17:29, 12 Oct 2011 by Sheppy

                                                                                                                                                                                                                                          list-style - MDN

                                                                                                                                                                                                                                            list-style

                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                            The list-style CSS property is a shorthand property for setting list-style-type, list-style-image and list-style-position.

                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                            list-style:  list-style-type || list-style-position || list-style-image 

                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                            Accepts one, two or three keywords in any order.

                                                                                                                                                                                                                                            list-style-type
                                                                                                                                                                                                                                            See list-style-type
                                                                                                                                                                                                                                            list-style-image
                                                                                                                                                                                                                                            See list-style-image
                                                                                                                                                                                                                                            list-style-position
                                                                                                                                                                                                                                            See list-style-position

                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                            View the live example

                                                                                                                                                                                                                                            ul { list-style: circle; }
                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                            #foo { list-style: square inside; }

                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                            Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                                                                            Tags (3)

                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                            Page last modified 22:32, 20 Apr 2011 by grendel

                                                                                                                                                                                                                                            list-style-image - MDN

                                                                                                                                                                                                                                              list-style-image

                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                              The list-style-image CSS property sets the image that will be used as the list item marker. It is often more convenient to use the shortcut list-style.

                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                              list-style-image:  
                                                                                                                                                                                                                                              <uri> | none | inherit
                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                              Values

                                                                                                                                                                                                                                              <uri>
                                                                                                                                                                                                                                              Location of image to use as the marker.
                                                                                                                                                                                                                                              none
                                                                                                                                                                                                                                              Default value

                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                              View the live example

                                                                                                                                                                                                                                              ul { list-style-image: url("images/arrow.gif") }
                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                              Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                              Basic support ? ? ? ? ?

                                                                                                                                                                                                                                              Tags (3)

                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                              Page last modified 22:45, 20 Apr 2011 by grendel

                                                                                                                                                                                                                                              list-style-position - MDN

                                                                                                                                                                                                                                                list-style-position

                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                The list-style-position CSS property specifies the position of the marker box in the principal block box. It is often more convenient to use the shortcut list-style.

                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                list-style-position:  inside | outside | inherit
                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                outside
                                                                                                                                                                                                                                                The marker box is outside the principal block box.
                                                                                                                                                                                                                                                inside
                                                                                                                                                                                                                                                The marker box is the first inline box in the principal block box, after which the element's content flows.

                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                View the live example

                                                                                                                                                                                                                                                  <ul>
                                                                                                                                                                                                                                                    <li>Lorem ipsum <br> dolor sit amet <br> consectetuer</li>
                                                                                                                                                                                                                                                    <li>sed diam nonummy <br> nibh euismod tincidunt <br> ut laoreet</li>
                                                                                                                                                                                                                                                  </ul>
                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                • ul {list-style:square; background:gold}
                                                                                                                                                                                                                                                • Lorem ipsum
                                                                                                                                                                                                                                                  dolor sit amet
                                                                                                                                                                                                                                                  consectetuer
                                                                                                                                                                                                                                                • sed diam nonummy
                                                                                                                                                                                                                                                  nibh euismod tincidunt
                                                                                                                                                                                                                                                  ut laoreet
                                                                                                                                                                                                                                                • ul {list-style:square inside; background:gold}
                                                                                                                                                                                                                                                • Lorem ipsum
                                                                                                                                                                                                                                                  dolor sit amet
                                                                                                                                                                                                                                                  consectetuer
                                                                                                                                                                                                                                                • sed diam nonummy
                                                                                                                                                                                                                                                  nibh euismod tincidunt
                                                                                                                                                                                                                                                  ut laoreet

                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                Basic support 1.0 1.0 (1.0) 4.0 3.5 10. (85)
                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                Tags (2)

                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                Page last modified 01:36, 21 Apr 2011 by grendel

                                                                                                                                                                                                                                                list-style-type - MDN

                                                                                                                                                                                                                                                  list-style-type

                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                  The list-style-type CSS property specifies appearance of a list item element. This is usually a <li> element as it is the only one who defaults to display:list-item but can be any element with this display value.

                                                                                                                                                                                                                                                  The color of the marker will be the same as the computed color of the element it applies to.

                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                  list-style-type:  <list-style-type> | none | inherit
                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                  Values

                                                                                                                                                                                                                                                  none
                                                                                                                                                                                                                                                  No item marker is shown.

                                                                                                                                                                                                                                                  <list-style-type> is one of the following:

                                                                                                                                                                                                                                                  disc
                                                                                                                                                                                                                                                  • A filled circle (default value)
                                                                                                                                                                                                                                                  circle
                                                                                                                                                                                                                                                  • A hollow circle
                                                                                                                                                                                                                                                  square
                                                                                                                                                                                                                                                  • A filled square
                                                                                                                                                                                                                                                  decimal
                                                                                                                                                                                                                                                  • Decimal numbers
                                                                                                                                                                                                                                                  • Beginning with 1.
                                                                                                                                                                                                                                                  decimal-leading-zero
                                                                                                                                                                                                                                                  • Decimal numbers
                                                                                                                                                                                                                                                  • Padded by initial zeros
                                                                                                                                                                                                                                                  • (e.g., 01, 02, 03, ... 98, 99)
                                                                                                                                                                                                                                                  lower-roman
                                                                                                                                                                                                                                                  • Lowercase roman numerals
                                                                                                                                                                                                                                                  • (i, ii, iii, iv, v, etc.)
                                                                                                                                                                                                                                                  upper-roman
                                                                                                                                                                                                                                                  • Uppercase roman numerals
                                                                                                                                                                                                                                                  • (I, II, III, IV, V, etc.)
                                                                                                                                                                                                                                                  lower-greek
                                                                                                                                                                                                                                                  • Lowercase classical Greek
                                                                                                                                                                                                                                                  • alpha, beta, gamma, ...
                                                                                                                                                                                                                                                  • (α, β, γ, ...)
                                                                                                                                                                                                                                                  lower-alpha | lower-latin
                                                                                                                                                                                                                                                  • Lowercase ASCII letters
                                                                                                                                                                                                                                                  • (a, b, c, ... z)
                                                                                                                                                                                                                                                  • lower-latin is unsupported in IE7
                                                                                                                                                                                                                                                  • See Browser compatibility section
                                                                                                                                                                                                                                                  upper-alpha | upper-latin
                                                                                                                                                                                                                                                  • Uppercase ASCII letters
                                                                                                                                                                                                                                                  • (A, B, C, ... Z)
                                                                                                                                                                                                                                                  • upper-latin is unsupported in IE7
                                                                                                                                                                                                                                                  armenian
                                                                                                                                                                                                                                                  • Traditional Armenian numbering
                                                                                                                                                                                                                                                  • (ayb/ayp, ben/pen, gim/keem, ...)
                                                                                                                                                                                                                                                  georgian
                                                                                                                                                                                                                                                  • Traditional Georgian numbering
                                                                                                                                                                                                                                                  • (an, ban, gan, ... he, tan, in ...)

                                                                                                                                                                                                                                                  CSS2 values, dropped in CSS 2.1, but supported in Gecko/Firefox and other browsers

                                                                                                                                                                                                                                                  hebrew
                                                                                                                                                                                                                                                  • Traditional Hebrew numbering
                                                                                                                                                                                                                                                  cjk-ideographic
                                                                                                                                                                                                                                                  • Plain ideographic numbers
                                                                                                                                                                                                                                                  • (Chinese-Japanese-Korean)
                                                                                                                                                                                                                                                  hiragana
                                                                                                                                                                                                                                                  • a, i, u, e, o, ka, ki, ...
                                                                                                                                                                                                                                                  • (Japanese)
                                                                                                                                                                                                                                                  katakana
                                                                                                                                                                                                                                                  • A, I, U, E, O, KA, KI, ...
                                                                                                                                                                                                                                                  • (Japanese)
                                                                                                                                                                                                                                                  hiragana-iroha
                                                                                                                                                                                                                                                  • i, ro, ha, ni, ho, he, to, ...
                                                                                                                                                                                                                                                  katakana-iroha
                                                                                                                                                                                                                                                  • I, RO, HA, NI, HO, HE, TO, ...

                                                                                                                                                                                                                                                  Mozilla extensions

                                                                                                                                                                                                                                                  Extended set of values provided by Mozilla (Firefox) to support list types in other languages.

                                                                                                                                                                                                                                                  -moz-arabic-indic
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-bengali
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-cjk-earthly-branch
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-cjk-heavenly-stem
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-devanagari
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-ethiopic-halehame
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-ethiopic-halehame-am
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-ethiopic-halehame-ti-er
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-ethiopic-halehame-ti-et
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-ethiopic-numeric
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-gujarati
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-gurmukhi
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-hangul
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-hangul-consonant
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-japanese-formal
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-japanese-informal
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-kannada
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-khmer
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-lao
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-malayalam
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-myanmar
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-oriya
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-persian
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-simp-chinese-formal
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-simp-chinese-informal
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-tamil
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-telugu
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-thai
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-trad-chinese-formal
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-trad-chinese-informal
                                                                                                                                                                                                                                                  • Example
                                                                                                                                                                                                                                                  -moz-urdu
                                                                                                                                                                                                                                                  • Example

                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                  View the live example

                                                                                                                                                                                                                                                  ol { list-style-type: upper-alpha; }
                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                  /* or use the shortcut "list-style": */
                                                                                                                                                                                                                                                  ol { list-style: upper-alpha; }

                                                                                                                                                                                                                                                  Notes

                                                                                                                                                                                                                                                  • Some list-style-types require a suitable font installed to display as expected.
                                                                                                                                                                                                                                                  • The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, upper-alpha rendering is undefined. Firefox and other browsers will continue as AA, AB, AC,... For long lists, it is recommended that authors specify true numbers.
                                                                                                                                                                                                                                                  • The list styles hebrew, cjk-ideographs, hiragana, katakana, hiragana-iroha and katakana-iroha are specified in CSS2 and removed from CSS 2.1 due to lack of implementation experience. They are expected to return in the CSS3 Lists module.

                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                  Basic support including :
                                                                                                                                                                                                                                                  none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
                                                                                                                                                                                                                                                   1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                  lower-latin, upper-latin, lower-greek, armenian, georgian  1.0 1.0 (1.0) 8.0 6.0 1.0 (85)
                                                                                                                                                                                                                                                  decimal-leading-zero  1.0 1.0 (1.0) 8.0 8.0 1.0 (85)
                                                                                                                                                                                                                                                  hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha  1.0 1.0 (1.0) -- 7.0 (displays decimal numbers) 1.0-1.2 (85-125)
                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                  Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                  For compatibility with Internet Explorer 7 (and lower) avoid lower-latin and upper-latin. Instead, use lower-alpha and upper-alpha.

                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                  Tags (3)

                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                  Page last modified 18:18, 23 Oct 2011 by teoli

                                                                                                                                                                                                                                                  margin-bottom - MDN

                                                                                                                                                                                                                                                    margin-bottom

                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                    The margin-bottom property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.

                                                                                                                                                                                                                                                    • Initial value : 0
                                                                                                                                                                                                                                                    • Applies to: all elements except those with table display types other than table-caption, table, and inline-table
                                                                                                                                                                                                                                                    • Inherited : no
                                                                                                                                                                                                                                                    • Percentages: refer to width of closest block-level ancestor
                                                                                                                                                                                                                                                    • Media: visual
                                                                                                                                                                                                                                                    • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                    margin-bottom: 
                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                    <length> | 
                                                                                                                                                                                                                                                    <percentage> | 
                                                                                                                                                                                                                                                    inherit | 
                                                                                                                                                                                                                                                    auto;
                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                    <length>
                                                                                                                                                                                                                                                    Specifies a fixed width. See <length> for possible values.
                                                                                                                                                                                                                                                    <percentage>
                                                                                                                                                                                                                                                     A <percentage> always relative to the width of the containing block.
                                                                                                                                                                                                                                                    auto
                                                                                                                                                                                                                                                    See margin.

                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                    .content { margin-bottom: 5%; }
                                                                                                                                                                                                                                                    .sidebox { margin-bottom: 10px; }
                                                                                                                                                                                                                                                    .logo    { margin-bottom: -5px; }
                                                                                                                                                                                                                                                    #header  { margin-bottom: 1em; }
                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                    View on jsFiddle


                                                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                    Basic support  1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                    auto value  1.0 1.0 (1.0) 6.0 (strict mode) 3.5 1.0 (85)
                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                    Page last modified 15:09, 9 Nov 2011 by teoli

                                                                                                                                                                                                                                                    margin - MDN

                                                                                                                                                                                                                                                      margin

                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                      The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties:
                                                                                                                                                                                                                                                      margin-top, margin-right, margin-bottom and margin-left.
                                                                                                                                                                                                                                                      Negative value are also allowed.

                                                                                                                                                                                                                                                      • Initial value : 0
                                                                                                                                                                                                                                                      • Applies to: all elements except those with table display types other than table-caption, table, and inline-table
                                                                                                                                                                                                                                                      • Inherited : no
                                                                                                                                                                                                                                                      • Percentages: refer always to the width of the containing block
                                                                                                                                                                                                                                                      • Media: visual
                                                                                                                                                                                                                                                      • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                      margin:  
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      <length>{1,4} | 
                                                                                                                                                                                                                                                      <percentage>{1,4} | 
                                                                                                                                                                                                                                                      inherit| 
                                                                                                                                                                                                                                                      auto

                                                                                                                                                                                                                                                      Values

                                                                                                                                                                                                                                                      Accepts one, two, three or four values of the following:

                                                                                                                                                                                                                                                      <length>
                                                                                                                                                                                                                                                      Specifies a fixed width. Negative Values are allowed. See for <length> possible units.
                                                                                                                                                                                                                                                      <percentage>
                                                                                                                                                                                                                                                      A <percentage> relative to the width of the containing block. Negative values are allowed.
                                                                                                                                                                                                                                                      auto
                                                                                                                                                                                                                                                      auto is replaced by some suitable value, e.g. it can be used for centering of blocks.
                                                                                                                                                                                                                                                      div { width:50%;  margin:0 auto; } centers the div container horizontally.
                                                                                                                                                                                                                                                      • One single value applies to all four sides.
                                                                                                                                                                                                                                                      • Two values apply first to top and bottom, the second one to left and right.
                                                                                                                                                                                                                                                      • Three values apply first to top, second to left and right and third to bottom.
                                                                                                                                                                                                                                                      • Four values apply to top, right, bottom and left in that order (clockwise).

                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                      margin: 5%;                /* all sides 5% margin */
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      margin: 10px;              /* all sides 10px margin */
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      margin: 1.6em 20px;        /* top and bottom 1.6em, left and right 20px margin */
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      margin: 10px 3% 1em;       /* top 10px, left and right 3%, bottom 1em margin */
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      margin: 1em auto;          /* 1em margin on top and bottom, box is horizontally centered */
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      margin: auto;              /* box is horizontally centered, 0 margin on top and bottom */
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      margin:     auto;
                                                                                                                                                                                                                                                      background: gold;
                                                                                                                                                                                                                                                      width:      66%;
                                                                                                                                                                                                                                                      margin:     -1em 0 100px -40px;
                                                                                                                                                                                                                                                      background: plum;
                                                                                                                                                                                                                                                      width:      20em

                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                      Basic support  1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                      auto value  1.0 1.0 (1.0) 6.0 (strict mode) 3.5 1.0 (85)
                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                      Tags (3)

                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                      Page last modified 01:31, 26 Apr 2011 by grendel

                                                                                                                                                                                                                                                      margin-left - MDN

                                                                                                                                                                                                                                                        margin-left

                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                        The margin-left property of an element sets the margin space required on the left side of an element. A negative value is also allowed.

                                                                                                                                                                                                                                                        • Initial value : 0
                                                                                                                                                                                                                                                        • Applies to: all elements except those with table display types other than table-caption, table, and inline-table
                                                                                                                                                                                                                                                        • Inherited : no
                                                                                                                                                                                                                                                        • Percentages: refer to width of closest block-level ancestor
                                                                                                                                                                                                                                                        • Media: visual
                                                                                                                                                                                                                                                        • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                        margin-left: 
                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                        <length> | 
                                                                                                                                                                                                                                                        <percentage> | 
                                                                                                                                                                                                                                                        inherit | 
                                                                                                                                                                                                                                                        auto;
                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                        <length>
                                                                                                                                                                                                                                                        Specifies a fixed width. See <length> for possible values.
                                                                                                                                                                                                                                                        <percentage>
                                                                                                                                                                                                                                                        A <percentage> always relative to the width of the containing block.
                                                                                                                                                                                                                                                        auto
                                                                                                                                                                                                                                                        See margin.

                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                        .content { margin-left: 5%; }
                                                                                                                                                                                                                                                        .sidebox { margin-left: 10px; }
                                                                                                                                                                                                                                                        .logo    { margin-left: -5px; }
                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                        Basic support  1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                        auto value  1.0 1.0 (1.0) 6.0 (strict mode) 3.5 1.0 (85)
                                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                        Tags (3)

                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                        Page last modified 15:09, 9 Nov 2011 by teoli

                                                                                                                                                                                                                                                        margin-right - MDN

                                                                                                                                                                                                                                                          margin-right

                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                          The margin-right property of an element sets the margin space required on the right side of an element. A negative value is also allowed.

                                                                                                                                                                                                                                                          • Initial value : 0
                                                                                                                                                                                                                                                          • Applies to: all elements except those with table display types other than table-caption, table, and inline-table
                                                                                                                                                                                                                                                          • Inherited : no
                                                                                                                                                                                                                                                          • Percentages: refer to width of closest block-level ancestor
                                                                                                                                                                                                                                                          • Media: visual
                                                                                                                                                                                                                                                          • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                          margin-right: 
                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                          <length>| 
                                                                                                                                                                                                                                                          <percentage> | 
                                                                                                                                                                                                                                                          inherit | 
                                                                                                                                                                                                                                                          auto;
                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                          <length>
                                                                                                                                                                                                                                                          Specifies a fixed width. See <length> for possible values.
                                                                                                                                                                                                                                                          <percentage>
                                                                                                                                                                                                                                                           A <percentage> always relative to the width of the containing block.
                                                                                                                                                                                                                                                          auto
                                                                                                                                                                                                                                                          See margin.

                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                          .content { margin-right: 5%; }
                                                                                                                                                                                                                                                          .sidebox { margin-right: 10px; }
                                                                                                                                                                                                                                                          .logo    { margin-right: -5px; }
                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                          Basic support  1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                          auto value  1.0 1.0 (1.0) 6.0 (strict mode) 3.5 1.0 (85)
                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                          Tags (2)

                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                          Page last modified 03:05, 26 Apr 2011 by grendel

                                                                                                                                                                                                                                                          margin-top - MDN

                                                                                                                                                                                                                                                            margin-top

                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                            The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.

                                                                                                                                                                                                                                                            • Initial value : 0
                                                                                                                                                                                                                                                            • Applies to: inline and block elements, table, inline-table and table-caption Elements
                                                                                                                                                                                                                                                            • Inherited : no
                                                                                                                                                                                                                                                            • Percentages: refer always to width of the containing block
                                                                                                                                                                                                                                                            • Media: visual
                                                                                                                                                                                                                                                            • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                            margin-top: 
                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                            <length>| 
                                                                                                                                                                                                                                                            <percentage>| 
                                                                                                                                                                                                                                                            inherit| 
                                                                                                                                                                                                                                                            auto
                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                            <length>
                                                                                                                                                                                                                                                            Specifies a fixed width. See <length> for possible values.
                                                                                                                                                                                                                                                            <percentage>
                                                                                                                                                                                                                                                             A <percentage> always relative to the width of the containing block.
                                                                                                                                                                                                                                                            auto
                                                                                                                                                                                                                                                            See margin.

                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                            .content { margin-top: 5%; }
                                                                                                                                                                                                                                                            .sidebox { margin-top: 10px; }
                                                                                                                                                                                                                                                            .logo    { margin-top: -5px; }
                                                                                                                                                                                                                                                            #footer  { margin-top: 1em; } 
                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                            Basic support  1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                            auto value  1.0 1.0 (1.0) 6.0 (strict mode) 3.5 1.0 (85)
                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                            Tags (3)

                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                            Page last modified 03:11, 26 Apr 2011 by grendel

                                                                                                                                                                                                                                                            marker-offset - MDN

                                                                                                                                                                                                                                                              marker-offset

                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                              marker-offset: <value>
                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                              Values

                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                              li:before { display: marker; marker-offset: 4px } 
                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                              Basic support ? ? ? ? ?
                                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                              Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                              See also

                                                                                                                                                                                                                                                              Tags (3)

                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                              Page last modified 07:37, 26 Apr 2011 by grendel

                                                                                                                                                                                                                                                              marks - MDN

                                                                                                                                                                                                                                                                marks

                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                This property adds crop and/or cross marks to the presentation of the document. Crop marks indicate where the page should be cut. Cross marks are used to align sheets.

                                                                                                                                                                                                                                                                Crop marks and cross marks are printed outside the page box. To have room to show crop and cross marks, the final pages will have to be somewhat bigger than the page box.

                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                marks: [ crop || cross ] | none
                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                @page { marks: crop cross; }
                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                Basic support ? ? ? ? ?
                                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                See also

                                                                                                                                                                                                                                                                Tags (5)

                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                Page last modified 20:52, 13 Aug 2011 by Pointy

                                                                                                                                                                                                                                                                max-height - MDN

                                                                                                                                                                                                                                                                  max-height

                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                  The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                  max-height:  <length> | <percentage> | none | inherit
                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                  Values

                                                                                                                                                                                                                                                                  <length>
                                                                                                                                                                                                                                                                  A fixed maximum height. See <length> for possible units.
                                                                                                                                                                                                                                                                  <percentage>
                                                                                                                                                                                                                                                                  The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
                                                                                                                                                                                                                                                                  none
                                                                                                                                                                                                                                                                  No limit on the height of the box.

                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                  View Live Examples (not available, please check later)

                                                                                                                                                                                                                                                                  table { max-height: 75%; }
                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                  form { max-height: none; }
                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                  Notes

                                                                                                                                                                                                                                                                  max-height overrides height, but min-height overrides max-height.

                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                  Basic support  1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416)
                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                  Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                  Page last modified 18:32, 26 Apr 2011 by grendel

                                                                                                                                                                                                                                                                  max-width - MDN

                                                                                                                                                                                                                                                                    max-width

                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                    The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.

                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                    max-width:  <length> | <percentage> | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available
                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                                    none
                                                                                                                                                                                                                                                                    The width has no maximum value.
                                                                                                                                                                                                                                                                    length
                                                                                                                                                                                                                                                                    See <length> for possible units.
                                                                                                                                                                                                                                                                    percentage
                                                                                                                                                                                                                                                                    Specified as a <percentage> of containing block's width.

                                                                                                                                                                                                                                                                    Mozilla Extensions

                                                                                                                                                                                                                                                                    -moz-max-content
                                                                                                                                                                                                                                                                    New in Firefox 3 The intrinsic preferred width.
                                                                                                                                                                                                                                                                    -moz-min-content
                                                                                                                                                                                                                                                                    New in Firefox 3 The intrinsic minimum width.
                                                                                                                                                                                                                                                                    -moz-available
                                                                                                                                                                                                                                                                    New in Firefox 3 The containing block width minus horizontal margin, border and padding.
                                                                                                                                                                                                                                                                    -moz-fit-content
                                                                                                                                                                                                                                                                    New in Firefox 3 The same as -moz-max-content.

                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                    body  { max-width: 40em; }
                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                    table { max-width: 75%; }
                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                    form  { max-width: none; }
                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                    p { background: gold }
                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                    The Mozilla community produces a lot of great software.

                                                                                                                                                                                                                                                                    p { background: lightgreen;
                                                                                                                                                                                                                                                                        max-width:  intrinsic;         /* Safari/WebKit */
                                                                                                                                                                                                                                                                        max-width:  -moz-max-content;  /* Firefox/Gecko */
                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                    The Mozilla community produces a lot of great software.

                                                                                                                                                                                                                                                                    p { background: lightblue;  max-width: -moz-min-content; }
                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                    The Mozilla community produces a lot of great software.

                                                                                                                                                                                                                                                                    Notes

                                                                                                                                                                                                                                                                    max-width overrides width, but min-width overrides max-width.

                                                                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                    Basic support  1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416),
                                                                                                                                                                                                                                                                    buggy before
                                                                                                                                                                                                                                                                    applies to <table>  no yes no yes no
                                                                                                                                                                                                                                                                    intrinsic width  1.0 3.0 (1.9) -- -- 2.0 (412) ?
                                                                                                                                                                                                                                                                     intrinsic -moz-max-content intrinsic
                                                                                                                                                                                                                                                                    intrinsic minimum width  -- 3.0 (1.9) -- -- --
                                                                                                                                                                                                                                                                    -moz-min-content
                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                    Tags (4)

                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                    Page last modified 21:28, 26 Apr 2011 by grendel

                                                                                                                                                                                                                                                                    @media - MDN

                                                                                                                                                                                                                                                                      @media

                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                      @media specifies the target media types (separated by commas) of a set of rules (delimited by curly braces).

                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                      @media <media types> {
                                                                                                                                                                                                                                                                        /* media-specific rules */
                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                      Media types

                                                                                                                                                                                                                                                                      Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
                                                                                                                                                                                                                                                                      all
                                                                                                                                                                                                                                                                      Suitable for all devices.
                                                                                                                                                                                                                                                                      braille
                                                                                                                                                                                                                                                                      Intended for braille tactile feedback devices.
                                                                                                                                                                                                                                                                      embossed
                                                                                                                                                                                                                                                                      Intended for paged braille printers.
                                                                                                                                                                                                                                                                      handheld
                                                                                                                                                                                                                                                                      Intended for handheld devices (typically small screen, limited bandwidth).
                                                                                                                                                                                                                                                                      print
                                                                                                                                                                                                                                                                      Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
                                                                                                                                                                                                                                                                      projection
                                                                                                                                                                                                                                                                      Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
                                                                                                                                                                                                                                                                      screen
                                                                                                                                                                                                                                                                      Intended primarily for color computer screens.
                                                                                                                                                                                                                                                                      speech
                                                                                                                                                                                                                                                                      Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
                                                                                                                                                                                                                                                                      tty
                                                                                                                                                                                                                                                                      Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
                                                                                                                                                                                                                                                                      tv
                                                                                                                                                                                                                                                                      Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

                                                                                                                                                                                                                                                                      Media groups

                                                                                                                                                                                                                                                                      Media types are also part of different Media Groups. The following table indicates which types are in which group.

                                                                                                                                                                                                                                                                        Groups
                                                                                                                                                                                                                                                                      Type continuous paged visual audio speech tactile grid bitmap interactive static
                                                                                                                                                                                                                                                                      braille X         X X   X X
                                                                                                                                                                                                                                                                      embossed   X       X X     X
                                                                                                                                                                                                                                                                      handheld X X X X X   X X X X
                                                                                                                                                                                                                                                                      print   X X         X   X
                                                                                                                                                                                                                                                                      projection   X X         X X  
                                                                                                                                                                                                                                                                      screen X   X X       X X X
                                                                                                                                                                                                                                                                      speech X       X       X X
                                                                                                                                                                                                                                                                      tty X   X       X   X X
                                                                                                                                                                                                                                                                      tv X X X X       X X X

                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                      @media print {
                                                                                                                                                                                                                                                                        body { font-size: 10pt }
                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                      @media screen {
                                                                                                                                                                                                                                                                        body { font-size: 13px }
                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                      @media screen, print {
                                                                                                                                                                                                                                                                        body { line-height: 1.2 }
                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                      Notes

                                                                                                                                                                                                                                                                      A multimodal media type is still only one media type. The 'tv' media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas.

                                                                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                      Basic support 1.0 1.0 (1.7) 9.0 9.2 1.3
                                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                      Basic support 1.0 1.0 (1.7) 9.0 9.0 3.1

                                                                                                                                                                                                                                                                      Tags (2)

                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                      Page last modified 07:37, 17 Oct 2011 by teoli

                                                                                                                                                                                                                                                                      min-height - MDN

                                                                                                                                                                                                                                                                        min-height

                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                        The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                        min-height:  <length> | <percentage> | inherit 
                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                                        <length>
                                                                                                                                                                                                                                                                        A fixed minimum height. See <length> for possible units.
                                                                                                                                                                                                                                                                        <percentage>
                                                                                                                                                                                                                                                                        The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as 0.

                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                        View Live Examples (not available, please check later)

                                                                                                                                                                                                                                                                        table { min-height: 75%; }
                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                        form { min-height: 0; }
                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                        Notes

                                                                                                                                                                                                                                                                        min-height overrides both max-height and height.

                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                        Basic support 1.0 1.0 (1.0) 7.0 4.0 2.02 (416)
                                                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                        Tags (4)

                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                        Page last modified 00:36, 27 Apr 2011 by grendel

                                                                                                                                                                                                                                                                        min-width - MDN

                                                                                                                                                                                                                                                                          min-width

                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                          The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                          min-width:  <length> | <percentage> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available

                                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                                          length
                                                                                                                                                                                                                                                                          See <length> for possible units.
                                                                                                                                                                                                                                                                          percentage
                                                                                                                                                                                                                                                                          Specified as a <percentage> of containing block's width.

                                                                                                                                                                                                                                                                          Mozilla Extensions

                                                                                                                                                                                                                                                                          -moz-max-content
                                                                                                                                                                                                                                                                          New in Firefox 3 The intrinsic preferred width.
                                                                                                                                                                                                                                                                          -moz-min-content
                                                                                                                                                                                                                                                                          New in Firefox 3 The intrinsic minimum width.
                                                                                                                                                                                                                                                                          -moz-available
                                                                                                                                                                                                                                                                          New in Firefox 3 The containing block width minus horizontal margin, border and padding.
                                                                                                                                                                                                                                                                          -moz-fit-content
                                                                                                                                                                                                                                                                          New in Firefox 3 The same as -moz-min-content.

                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                          table { min-width: 75%; }
                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                          form { min-width: 0; }
                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                          Notes

                                                                                                                                                                                                                                                                          min-width overrides both max-width and width.

                                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                          Basic support 1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416), buggy before
                                                                                                                                                                                                                                                                          applies to <table> no yes no yes no
                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                          Page last modified 00:40, 27 Apr 2011 by grendel

                                                                                                                                                                                                                                                                          ::-moz-progress-bar - MDN

                                                                                                                                                                                                                                                                            ::-moz-progress-bar

                                                                                                                                                                                                                                                                            Table of contents

                                                                                                                                                                                                                                                                              1. 1.1. Summary
                                                                                                                                                                                                                                                                              2. 1.2. Examples
                                                                                                                                                                                                                                                                            1. 2. See also
                                                                                                                                                                                                                                                                            Table of contents
                                                                                                                                                                                                                                                                              1. 1.1. Summary
                                                                                                                                                                                                                                                                              2. 1.2. Examples
                                                                                                                                                                                                                                                                            1. 2. See also

                                                                                                                                                                                                                                                                            « CSS « CSS Reference « CSS Reference:Mozilla Extensions

                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                            The ::-moz-progress-bar pseudo-element applies to the area of an HTML  <progress> element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars.

                                                                                                                                                                                                                                                                            You have pretty broad capabilities to style the bar. This can be especially useful with indeterminate bars (via the :indeterminate pseudo-class), where you may wish to substantially change the default appearance; you can change the width and positioning of the bar, for example. (By which we probably mean the whole element's dimensions and position, not just the painted part of the element, as featured in the screen shot below.)

                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                            This example styles the progress meter portion of the progress bar with ID redbar with the color red.

                                                                                                                                                                                                                                                                            #redbar::-moz-progress-bar {
                                                                                                                                                                                                                                                                              background-color: red;
                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                            A bar using this style might look something like this:

                                                                                                                                                                                                                                                                            redbar.png

                                                                                                                                                                                                                                                                            See also

                                                                                                                                                                                                                                                                            Tags (3)

                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                            Attachments (1)

                                                                                                                                                                                                                                                                            FileSizeDateAttached by 
                                                                                                                                                                                                                                                                             redbar.png
                                                                                                                                                                                                                                                                            No description
                                                                                                                                                                                                                                                                            2.96 kB20:51, 16 Jun 2011SheppyActions

                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                            Page last modified 12:21, 18 Aug 2011 by Sheppy

                                                                                                                                                                                                                                                                            Mozilla Developer Network

                                                                                                                                                                                                                                                                            Mozilla Developer Network

                                                                                                                                                                                                                                                                            Join MDN | Log in

                                                                                                                                                                                                                                                                            It's the Web. You drive.

                                                                                                                                                                                                                                                                            Welcome to the Mozilla Developer Network.

                                                                                                                                                                                                                                                                            We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                                                                                                                                                                                                                            Browse Thousands of Docs for Web Developers

                                                                                                                                                                                                                                                                            And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                                                                                                                                                                                                                            Latest News & Updates

                                                                                                                                                                                                                                                                            • Mozilla Hacks Weekly, November 10th 2011

                                                                                                                                                                                                                                                                              We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                                                                                                                                                                                                                            • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                                                                                                                                                                                                                              Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                                                                                                                                                                                                                            • SDK Hack day: what to expect

                                                                                                                                                                                                                                                                              In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                                                                                                                                                                                                                            • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                                                                                                                                                                                                                              about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                                                                                                                                                                                                                            Awesome Demos

                                                                                                                                                                                                                                                                            More Demos…

                                                                                                                                                                                                                                                                            What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                                                                                                                                                                                                                            none - MDN

                                                                                                                                                                                                                                                                              none

                                                                                                                                                                                                                                                                              Table of contents

                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                              2. 2. Used in
                                                                                                                                                                                                                                                                              Table of contents
                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                              2. 2. Used in

                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                              none is a common value for most CSS properties. It is often the default value, but can always be considered as a sort of "standard" value. It is comparable to the value normal , used in a similar manner for other properties.

                                                                                                                                                                                                                                                                              Used in

                                                                                                                                                                                                                                                                              float
                                                                                                                                                                                                                                                                              The element doesn't float.
                                                                                                                                                                                                                                                                              text-decoration
                                                                                                                                                                                                                                                                              Doesn't decorate the element.
                                                                                                                                                                                                                                                                              max-height / max-width
                                                                                                                                                                                                                                                                              Doesn't bound the height / width with a particular value.

                                                                                                                                                                                                                                                                              Tags (2)

                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                              Page last modified 09:16, 10 Mar 2011 by gregtyler

                                                                                                                                                                                                                                                                              normal - MDN

                                                                                                                                                                                                                                                                                normal

                                                                                                                                                                                                                                                                                Table of contents

                                                                                                                                                                                                                                                                                1. 1. Summary
                                                                                                                                                                                                                                                                                2. 2. Used in
                                                                                                                                                                                                                                                                                Table of contents
                                                                                                                                                                                                                                                                                1. 1. Summary
                                                                                                                                                                                                                                                                                2. 2. Used in

                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                normal is a common value for some CSS properties. It is often the default value, but can always be considered as a sort of "standard" value. It is comparable to the value none, used in a similar manner for other properties.

                                                                                                                                                                                                                                                                                Used in

                                                                                                                                                                                                                                                                                font-weight
                                                                                                                                                                                                                                                                                Gives the font standard weight (400). That is, the text is not noticeably bold or light.
                                                                                                                                                                                                                                                                                font-style
                                                                                                                                                                                                                                                                                Does not apply any italic or oblique to the font.
                                                                                                                                                                                                                                                                                word-spacing
                                                                                                                                                                                                                                                                                Uses the standard spacing between words, specified by the font.

                                                                                                                                                                                                                                                                                Also used in:

                                                                                                                                                                                                                                                                                Tags (2)

                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                Page last modified 09:03, 10 Mar 2011 by gregtyler

                                                                                                                                                                                                                                                                                :not() - MDN

                                                                                                                                                                                                                                                                                  :not()

                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                  The negation pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

                                                                                                                                                                                                                                                                                  The specificity of the :not pseudo-class is the specificity of its argument. The :not pseudo-class does not add to the selector specificity, unlike other pseudo-classes.

                                                                                                                                                                                                                                                                                  Notes:
                                                                                                                                                                                                                                                                                  • Useless selectors can be written using this pseudo-class. E.g. :not(*) matching any element which is not any element will never be applied.
                                                                                                                                                                                                                                                                                  • It is possible to rewrite other rules. E.g. foo:not(bar)will match the same element than the simple foo. Nevertheless the specificity of the first one is higher.

                                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                                  :not(selector) { style properties }

                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                  Usage Example

                                                                                                                                                                                                                                                                                  p:not(.classy) { color: red; }
                                                                                                                                                                                                                                                                                  :not(p) { color: green; }

                                                                                                                                                                                                                                                                                  ...where...

                                                                                                                                                                                                                                                                                  <p>Some text.</p>
                                                                                                                                                                                                                                                                                  <p class="classy">Some other text.</p>
                                                                                                                                                                                                                                                                                  <span>One more text<span>
                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                  ...should look like...

                                                                                                                                                                                                                                                                                  Some text.

                                                                                                                                                                                                                                                                                  Some other text.

                                                                                                                                                                                                                                                                                  One more text

                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                  Browser Lowest Version
                                                                                                                                                                                                                                                                                  Internet Explorer 9.0
                                                                                                                                                                                                                                                                                  Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                  Opera 9.5
                                                                                                                                                                                                                                                                                  Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                  Tags (5)

                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                  Page last modified 11:10, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                  :nth-child - MDN

                                                                                                                                                                                                                                                                                    :nth-child

                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                    The :nth-child pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

                                                                                                                                                                                                                                                                                    This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.

                                                                                                                                                                                                                                                                                    The values a and b must both be integers, and the index of an element's first child is 1.

                                                                                                                                                                                                                                                                                    Among other things, this allows selectors to match every other row in a table.

                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                    element:nth-child(an + b) { style properties }
                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                    Example selectors

                                                                                                                                                                                                                                                                                    tr:nth-child(2n+1)
                                                                                                                                                                                                                                                                                    Represents the odd rows of an HTML table.
                                                                                                                                                                                                                                                                                    tr:nth-child(odd)
                                                                                                                                                                                                                                                                                    Represents the odd rows of an HTML table.
                                                                                                                                                                                                                                                                                    tr:nth-child(2n)
                                                                                                                                                                                                                                                                                    Represents the even rows of an HTML table.
                                                                                                                                                                                                                                                                                    tr:nth-child(even)
                                                                                                                                                                                                                                                                                    Represents the even rows of an HTML table.
                                                                                                                                                                                                                                                                                    span:nth-child(0n+1)
                                                                                                                                                                                                                                                                                    Represents a span element which is the first child of its parent; this is the same as the :first-child selector.
                                                                                                                                                                                                                                                                                    span:nth-child(1)
                                                                                                                                                                                                                                                                                    Equivalent to the above.
                                                                                                                                                                                                                                                                                    span:nth-child(-n+3)
                                                                                                                                                                                                                                                                                    Three first span elements.

                                                                                                                                                                                                                                                                                    Usage example

                                                                                                                                                                                                                                                                                    span:nth-child(2n+1)
                                                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                                                        background-color: lime;
                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                    ...where...

                                                                                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                                                                                        <span>This span is limed!</span>
                                                                                                                                                                                                                                                                                        <span>This span is not. :(</span>
                                                                                                                                                                                                                                                                                        <span>But this one is!</span>
                                                                                                                                                                                                                                                                                        <span>Sadly, this one is not...</span>
                                                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                                                    ... should look like ...

                                                                                                                                                                                                                                                                                       This span is limed!
                                                                                                                                                                                                                                                                                       This span is not. :(
                                                                                                                                                                                                                                                                                       But this one is!
                                                                                                                                                                                                                                                                                       Sadly, this one is not...
                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                    SpecificationsEdit section

                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                    Basic support 4.0 3.5 (1.9.1) 9 10.10 4
                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                    Notes

                                                                                                                                                                                                                                                                                    • Opera can't handle dynamic insertion of elements.

                                                                                                                                                                                                                                                                                    Tags (4)

                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                    Page last modified 11:40, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                    :nth-last-child - MDN

                                                                                                                                                                                                                                                                                      :nth-last-child

                                                                                                                                                                                                                                                                                      Table of contents

                                                                                                                                                                                                                                                                                      1. 1. Summary
                                                                                                                                                                                                                                                                                      2. 2. Syntax
                                                                                                                                                                                                                                                                                      3. 3. Examples
                                                                                                                                                                                                                                                                                        1. 3.1. Example selectors
                                                                                                                                                                                                                                                                                      4. 4. See also
                                                                                                                                                                                                                                                                                      Table of contents
                                                                                                                                                                                                                                                                                      1. 1. Summary
                                                                                                                                                                                                                                                                                      2. 2. Syntax
                                                                                                                                                                                                                                                                                      3. 3. Examples
                                                                                                                                                                                                                                                                                        1. 3.1. Example selectors
                                                                                                                                                                                                                                                                                      4. 4. See also

                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                      Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                      (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                      The :nth-last-child pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                      element:nth-last-child(an + b) { style properties }
                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                      Example selectors

                                                                                                                                                                                                                                                                                      tr:nth-last-child(-n+4)
                                                                                                                                                                                                                                                                                      Matches the last four rows of an HTML table.
                                                                                                                                                                                                                                                                                      span:nth-last-child(even)
                                                                                                                                                                                                                                                                                      Matches the even elements in their parent element, starting at the last element and working backward.

                                                                                                                                                                                                                                                                                      Tags (6)

                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                      Page last modified 11:42, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                      :nth-last-of-type - MDN

                                                                                                                                                                                                                                                                                        :nth-last-of-type

                                                                                                                                                                                                                                                                                        Table of contents

                                                                                                                                                                                                                                                                                        1. 1. Summary
                                                                                                                                                                                                                                                                                        2. 2. Syntax
                                                                                                                                                                                                                                                                                        3. 3. See also
                                                                                                                                                                                                                                                                                        Table of contents
                                                                                                                                                                                                                                                                                        1. 1. Summary
                                                                                                                                                                                                                                                                                        2. 2. Syntax
                                                                                                                                                                                                                                                                                        3. 3. See also

                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                        Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                        (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                        The :nth-last-of-type pseudo-class matches an element that has an+b-1 siblings with the same element name after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                        element:nth-last-of-type(an + b) { style properties }
                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                        Tags (6)

                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                        Page last modified 11:48, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                        :nth-of-type - MDN

                                                                                                                                                                                                                                                                                          :nth-of-type

                                                                                                                                                                                                                                                                                          Table of contents

                                                                                                                                                                                                                                                                                          1. 1. Summary
                                                                                                                                                                                                                                                                                          2. 2. Syntax
                                                                                                                                                                                                                                                                                          3. 3. Examples
                                                                                                                                                                                                                                                                                            1. 3.1. Example
                                                                                                                                                                                                                                                                                          4. 4. See also
                                                                                                                                                                                                                                                                                          Table of contents
                                                                                                                                                                                                                                                                                          1. 1. Summary
                                                                                                                                                                                                                                                                                          2. 2. Syntax
                                                                                                                                                                                                                                                                                          3. 3. Examples
                                                                                                                                                                                                                                                                                            1. 3.1. Example
                                                                                                                                                                                                                                                                                          4. 4. See also

                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                          Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                          (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                          The :nth-of-type pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                          element:nth-of-type(an + b) { style properties }
                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                          Example

                                                                                                                                                                                                                                                                                          This example causes the positions of floated images to alternate between right and left.

                                                                                                                                                                                                                                                                                          img:nth-of-type(2n+1) { float: right; }
                                                                                                                                                                                                                                                                                          img:nth-of-type(2n) { float: left; }

                                                                                                                                                                                                                                                                                          Tags (6)

                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                          Page last modified 11:47, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                          :only-child - MDN

                                                                                                                                                                                                                                                                                            :only-child

                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                            The :only-child pseudo-class represents any element which is the only child of its parent.

                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                            parent child:only-child {
                                                                                                                                                                                                                                                                                                property:value;
                                                                                                                                                                                                                                                                                            } 
                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                            div span:only-child {
                                                                                                                                                                                                                                                                                                color:red;
                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                                                                                                <span>Some red text</span>
                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                                                                                                <span>Some regular text</span>
                                                                                                                                                                                                                                                                                                <span>Some regular text</span>
                                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                                            Result

                                                                                                                                                                                                                                                                                            Some red text
                                                                                                                                                                                                                                                                                            Some regular text Some regular text

                                                                                                                                                                                                                                                                                            SpecificationsEdit section
                                                                                                                                                                                                                                                                                            Edit section

                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                            Basic support 2 1.5 (1.8) 9 9.5 3.1
                                                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                            Basic support 2.1 1.0 (1.8) 9 10.0 3.1

                                                                                                                                                                                                                                                                                            Tags (3)

                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                            Page last modified 11:53, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                            :only-of-type - MDN

                                                                                                                                                                                                                                                                                              :only-of-type

                                                                                                                                                                                                                                                                                              Table of contents

                                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                                                                                              3. 3. See also
                                                                                                                                                                                                                                                                                              Table of contents
                                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                                                                                              3. 3. See also

                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                              Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                              (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                              The :only-of-type pseudo-class represents any element that have no siblings of the given type.

                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                              element:only-of-type { style properties }
                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                              Page last modified 11:59, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                              opacity - MDN

                                                                                                                                                                                                                                                                                                opacity

                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

                                                                                                                                                                                                                                                                                                Using this property with a value different than 1 places the element in a new stacking context.

                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                opacity:  <number> | inherit

                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                A <number> in the range 0.0 to 1.0. Any value smaller or larger is clamped to this range.

                                                                                                                                                                                                                                                                                                0
                                                                                                                                                                                                                                                                                                The element is fully transparent (that is, invisible).
                                                                                                                                                                                                                                                                                                number between 0 and 1
                                                                                                                                                                                                                                                                                                The element is translucent (that is, background can be seen).
                                                                                                                                                                                                                                                                                                1
                                                                                                                                                                                                                                                                                                The element is fully opaque (solid).

                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                hbox.example {
                                                                                                                                                                                                                                                                                                  opacity: 0.5; /* see the background through the hbox */
                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                Cross Browser compatible Live Example

                                                                                                                                                                                                                                                                                                pre {                               /* make the box translucent (20% opaque) */
                                                                                                                                                                                                                                                                                                   border: solid red;
                                                                                                                                                                                                                                                                                                   opacity: 0.2;
                                                                                                                                                                                                                                                                                                   filter: alpha(opacity=20);       /* IE8 and lower */
                                                                                                                                                                                                                                                                                                   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                pre {                               /* make the box translucent (50% opaque) */
                                                                                                                                                                                                                                                                                                   border: solid red;
                                                                                                                                                                                                                                                                                                   opacity: 0.5;
                                                                                                                                                                                                                                                                                                   filter: alpha(opacity=50);       /* IE8 and lower */
                                                                                                                                                                                                                                                                                                   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                pre {                               /* make the box translucent (80% opaque) */
                                                                                                                                                                                                                                                                                                   border: solid red;
                                                                                                                                                                                                                                                                                                   opacity: 0.8;
                                                                                                                                                                                                                                                                                                   filter: alpha(opacity=80);       /* IE8 and lower */
                                                                                                                                                                                                                                                                                                   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                Different opacity with :hover

                                                                                                                                                                                                                                                                                                <html>
                                                                                                                                                                                                                                                                                                <head>
                                                                                                                                                                                                                                                                                                <style>
                                                                                                                                                                                                                                                                                                img.opacity {
                                                                                                                                                                                                                                                                                                   opacity: 1;
                                                                                                                                                                                                                                                                                                   filter: alpha(opacity=50);
                                                                                                                                                                                                                                                                                                   zoom: 1;
                                                                                                                                                                                                                                                                                                 }  
                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                img.opacity:hover {
                                                                                                                                                                                                                                                                                                   opacity: 0.5;
                                                                                                                                                                                                                                                                                                   filter: alpha(opacity=100);
                                                                                                                                                                                                                                                                                                   zoom: 1;
                                                                                                                                                                                                                                                                                                 }
                                                                                                                                                                                                                                                                                                </style>
                                                                                                                                                                                                                                                                                                </head>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                <body>
                                                                                                                                                                                                                                                                                                <img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" />
                                                                                                                                                                                                                                                                                                </body>
                                                                                                                                                                                                                                                                                                </html>

                                                                                                                                                                                                                                                                                                Notes

                                                                                                                                                                                                                                                                                                • History:  Prior to Mozilla 1.7 (Firefox 0.9) the -moz-opacity property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to opacity.  Since then -moz-opacity was supported just as an alias for opacity.
                                                                                                                                                                                                                                                                                                • Gecko 1.9.1 (Firefox 3.5) and later do not support -moz-opacity.  By now, you should be using simply opacity.

                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                Basic support 1.0 1.0 (1.7) 9.0 9.0 1.2 (125)
                                                                                                                                                                                                                                                                                                8.0
                                                                                                                                                                                                                                                                                                filter: alpha(opacity=xx)
                                                                                                                                                                                                                                                                                                filter: "alpha(opacity=xx)"

                                                                                                                                                                                                                                                                                                (both are synonymous)
                                                                                                                                                                                                                                                                                                4.0
                                                                                                                                                                                                                                                                                                filter: alpha(opacity=xx)
                                                                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                Basic support 1.0 1.0 (1.7) 9.0 9.0 3.2
                                                                                                                                                                                                                                                                                                8.0
                                                                                                                                                                                                                                                                                                filter: alpha(opacity=xx)
                                                                                                                                                                                                                                                                                                filter: "alpha(opacity=xx)"

                                                                                                                                                                                                                                                                                                (both are synonymous)
                                                                                                                                                                                                                                                                                                4.0
                                                                                                                                                                                                                                                                                                filter: alpha(opacity=xx)
                                                                                                                                                                                                                                                                                                • Prior to version 9, Internet Explorer does not support opacity, rather it supports filter instead.
                                                                                                                                                                                                                                                                                                • IE supports also the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx). This is needless, so don't use it.
                                                                                                                                                                                                                                                                                                • IE8 introduced -ms-filter, which is synonymous with filter. Don't use the prefix.
                                                                                                                                                                                                                                                                                                • Similar to -moz-opacity, -khtml-opacity has been dead since early 2004 (release of Safari 1.2).
                                                                                                                                                                                                                                                                                                  Konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.
                                                                                                                                                                                                                                                                                                  Don't use -khtml-opacity nor -moz-opacity anymore.

                                                                                                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                                                                                                Tags (3)

                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                Page last modified 08:38, 31 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                :optional - MDN

                                                                                                                                                                                                                                                                                                  :optional

                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                  The :optional CSS pseudo-class represents any <input> element that does not have the required attribute set on it. This allows forms to easily indicate optional fields, and to style them accordingly.

                                                                                                                                                                                                                                                                                                  To provide an appearance for required form fields, the :required pseudo-class may be used.

                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                  Feature Firefox Chrome Internet Explorer Safari Opera
                                                                                                                                                                                                                                                                                                  Basic support 4 8 -- 5 9.5

                                                                                                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                  Page last modified 07:28, 12 Oct 2011 by berkerpeksag

                                                                                                                                                                                                                                                                                                  orphans - MDN

                                                                                                                                                                                                                                                                                                    orphans

                                                                                                                                                                                                                                                                                                    Table of contents

                                                                                                                                                                                                                                                                                                    1. 1. Summary
                                                                                                                                                                                                                                                                                                    2. 2. Syntax
                                                                                                                                                                                                                                                                                                    3. 3. Values
                                                                                                                                                                                                                                                                                                    4. 4. Examples
                                                                                                                                                                                                                                                                                                    5. 5. Browser Compatibility
                                                                                                                                                                                                                                                                                                    6. 6. See Also

                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                    The orphans property refers to the minimum number of lines in a block container that must be left at the bottom of the page.  This property is normally used to control how page breaks occur.

                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                    orphans: <integer> | inherit
                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                                                                    Only positive values are allowed.

                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                    Browser Compatibility

                                                                                                                                                                                                                                                                                                    Browser Lowest version
                                                                                                                                                                                                                                                                                                    Internet Explorer IE 8
                                                                                                                                                                                                                                                                                                    Firefox (Gecko) --
                                                                                                                                                                                                                                                                                                    Opera 9.2

                                                                                                                                                                                                                                                                                                    Safari | Chrome | WebKit

                                                                                                                                                                                                                                                                                                    --

                                                                                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                    Page last modified 05:38, 23 Feb 2011 by Sheppy

                                                                                                                                                                                                                                                                                                    outline-color - MDN

                                                                                                                                                                                                                                                                                                      outline-color

                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                      The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                       outline-color:  <color> | invert | inherit

                                                                                                                                                                                                                                                                                                      Values

                                                                                                                                                                                                                                                                                                      <color>
                                                                                                                                                                                                                                                                                                      See <color> for the various color keywords and notations.
                                                                                                                                                                                                                                                                                                      invert
                                                                                                                                                                                                                                                                                                      To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Currently only supported in Opera and IE8.


                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                      The css code here:

                                                                                                                                                                                                                                                                                                      .example {
                                                                                                                                                                                                                                                                                                                 /* make the outline red */
                                                                                                                                                                                                                                                                                                                 outline-color: #FF0000;
                                                                                                                                                                                                                                                                                                       }

                                                                                                                                                                                                                                                                                                      produces the following outline color for a 2px outline:

                                                                                                                                                                                                                                                                                                      outline-color is blue.

                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                      Basic support  1.0 1.5 (1.8)
                                                                                                                                                                                                                                                                                                      In versions previous to 1.5: -moz-outline-color
                                                                                                                                                                                                                                                                                                       8.0  7.0  1.2 (125)
                                                                                                                                                                                                                                                                                                      invert value -- Support had been dropped since 3.0 (1.9)
                                                                                                                                                                                                                                                                                                      bug 359497 : WONTFIX
                                                                                                                                                                                                                                                                                                      Workaround: Use the value of the element's color property. 
                                                                                                                                                                                                                                                                                                       8.0  7.0  --
                                                                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                      Tags (5)

                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                      Page last modified 21:55, 22 Sep 2011 by syssgx

                                                                                                                                                                                                                                                                                                      outline - MDN

                                                                                                                                                                                                                                                                                                        outline

                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                        The outline CSS property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

                                                                                                                                                                                                                                                                                                        Outlines differ from borders in the following ways:

                                                                                                                                                                                                                                                                                                        • Outlines do not take up space, they are drawn above the content.
                                                                                                                                                                                                                                                                                                        • Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this:
                                                                                                                                                                                                                                                                                                          TEXTTEXTTEXT

                                                                                                                                                                                                                                                                                                        In browsers previous to Gecko 1.8 (Firefox 1.5) a similar effect can be achieved using Mozilla CSS Extension -moz-outline.

                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                        outline:  [ <outline-width> || <outline-style> || <outline-color> ] | inherit
                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                                                                        One, two or three values, given in arbitrary order:

                                                                                                                                                                                                                                                                                                        outline-width
                                                                                                                                                                                                                                                                                                        Optional, default value medium is used if absent. See outline-width.
                                                                                                                                                                                                                                                                                                        outline-style
                                                                                                                                                                                                                                                                                                        Required, default value none is used if absent. See outline-style.
                                                                                                                                                                                                                                                                                                        outline-color
                                                                                                                                                                                                                                                                                                        Optional, default value if absent: invert. Since Gecko 1.9 (Firefox 3), the value of the element's color property (foreground color) is used. See outline-color.

                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                         outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;
                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                        /* two identical declarations */
                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                        :link:hover { outline: 1px solid #000 }
                                                                                                                                                                                                                                                                                                        :link:hover { outline: solid black 1px }

                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                        Basic support 1.0 1.5 (1.8) 8.0 7.0 1.2 (125)
                                                                                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                        Basic support 1.0 1.0 (1.8) 8.0 6.0 3.1

                                                                                                                                                                                                                                                                                                        Tags (2)

                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                        Page last modified 12:51, 17 Sep 2011 by McGurk

                                                                                                                                                                                                                                                                                                        outline-offset - MDN

                                                                                                                                                                                                                                                                                                          outline-offset

                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                          The outline-offset CSS property is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.

                                                                                                                                                                                                                                                                                                          The space will be transparent (the parent will determine the background).

                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                          outline-offset:  <length> | inherit

                                                                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                                                                          <length>
                                                                                                                                                                                                                                                                                                          The width of the space. See <length> for possible units. Negative values place the outline inside the element.

                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                          .example {
                                                                                                                                                                                                                                                                                                            outline: dashed thin;
                                                                                                                                                                                                                                                                                                            /* Move the outline 3px away from the border */
                                                                                                                                                                                                                                                                                                            outline-offset: 3px;
                                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                                          The code above produces this effect:

                                                                                                                                                                                                                                                                                                          outline: offset 5px;

                                                                                                                                                                                                                                                                                                          Another example:

                                                                                                                                                                                                                                                                                                          outline: multiple offsets;


                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                          Basic support 1.0 1.5 (1.8) -- 9.5 1.2 (125)
                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                          Page last modified 16:04, 26 Aug 2011 by syssgx

                                                                                                                                                                                                                                                                                                          outline-style - MDN

                                                                                                                                                                                                                                                                                                            outline-style

                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                            The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

                                                                                                                                                                                                                                                                                                            It is often more convenient to use the shortcut property outline instead of outline-style, outline-width and outline-color.

                                                                                                                                                                                                                                                                                                            In browsers prior to Gecko 1.8 (Firefox 1.5) this effect can be achieved using Mozilla CSS Extension -moz-outline-style.

                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                            outline-style:  auto | <border-style> | inherit
                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                                                                            <border-style> can be any of the following:

                                                                                                                                                                                                                                                                                                            none
                                                                                                                                                                                                                                                                                                            No outline ( outline-width is 0).
                                                                                                                                                                                                                                                                                                            dotted
                                                                                                                                                                                                                                                                                                            The outline is a series of dots.
                                                                                                                                                                                                                                                                                                            dashed
                                                                                                                                                                                                                                                                                                            The outline is a series of short line segments.
                                                                                                                                                                                                                                                                                                            solid
                                                                                                                                                                                                                                                                                                            The outline is a single line.
                                                                                                                                                                                                                                                                                                            double
                                                                                                                                                                                                                                                                                                            The outline is two single lines. The outline-width is the sum of the two lines and the space between them.
                                                                                                                                                                                                                                                                                                            groove
                                                                                                                                                                                                                                                                                                            The outline looks as though it were carved into the canvas.
                                                                                                                                                                                                                                                                                                            ridge
                                                                                                                                                                                                                                                                                                            The opposite of groove: the outline looks as though it were coming out of the canvas.
                                                                                                                                                                                                                                                                                                            inset
                                                                                                                                                                                                                                                                                                            The outline makes the box look as though it were embeded in the canvas.
                                                                                                                                                                                                                                                                                                            outset
                                                                                                                                                                                                                                                                                                            The opposite of inset: the outline makes the box look as though it were coming out of the canvas.

                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                            .example {  /* make the outline a 3D groove style */
                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                        outline-style: groove;        /* same result as "outline: groove" */ 
                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                            Basic support  1.0 1.5 (1.8) 8.0 7.0 1.2 (125)
                                                                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                            See outline property

                                                                                                                                                                                                                                                                                                            Tags (4)

                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                            Page last modified 19:20, 29 Apr 2011 by grendel

                                                                                                                                                                                                                                                                                                            outline-width - MDN

                                                                                                                                                                                                                                                                                                              outline-width

                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                              The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:

                                                                                                                                                                                                                                                                                                              In browsers previous to Gecko 1.8 (Firefox 1.5) essentially the same effect can be achieved using Mozilla CSS Extension -moz-outline-width.

                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                              outline-width: thin | medium | thick | 
                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                              <length> | 
                                                                                                                                                                                                                                                                                                              inherit
                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                              Values

                                                                                                                                                                                                                                                                                                              thin
                                                                                                                                                                                                                                                                                                              Depends on the UA. Typically 1px in desktop browsers like Firefox.
                                                                                                                                                                                                                                                                                                              medium
                                                                                                                                                                                                                                                                                                              Depends on the UA. Typically 3px in desktop browsers like Firefox.
                                                                                                                                                                                                                                                                                                              thick
                                                                                                                                                                                                                                                                                                              Depends on the UA. Typically 5px in desktop browsers like Firefox.
                                                                                                                                                                                                                                                                                                              <length>
                                                                                                                                                                                                                                                                                                              See <length> values.

                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                               thin   medium   thick   2px   1ex            5em 
                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                              Basic support  1.0 1.5 (1.8) 8.0 7.0 1.2 (125)
                                                                                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                              Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                              Page last modified 19:30, 29 Apr 2011 by grendel

                                                                                                                                                                                                                                                                                                              overflow - MDN

                                                                                                                                                                                                                                                                                                                overflow

                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                overflow:  visible | hidden | scroll | auto | 
                                                                                                                                                                                                                                                                                                                inherit

                                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                                visible
                                                                                                                                                                                                                                                                                                                Default value. Content is not clipped, it may be rendered outside the content box.
                                                                                                                                                                                                                                                                                                                hidden
                                                                                                                                                                                                                                                                                                                The content is clipped and no scrollbars are provided.
                                                                                                                                                                                                                                                                                                                scroll
                                                                                                                                                                                                                                                                                                                The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
                                                                                                                                                                                                                                                                                                                auto
                                                                                                                                                                                                                                                                                                                Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

                                                                                                                                                                                                                                                                                                                Mozilla Extensions

                                                                                                                                                                                                                                                                                                                -moz-scrollbars-none
                                                                                                                                                                                                                                                                                                                Obsolete Use overflow:hidden instead.
                                                                                                                                                                                                                                                                                                                -moz-scrollbars-horizontal
                                                                                                                                                                                                                                                                                                                Deprecated Use of overflow-x and overflow-y is preferred.
                                                                                                                                                                                                                                                                                                                -moz-scrollbars-vertical
                                                                                                                                                                                                                                                                                                                Deprecated Use of overflow-x and overflow-y is preferred.
                                                                                                                                                                                                                                                                                                                -moz-hidden-unscrollable
                                                                                                                                                                                                                                                                                                                Is intended mainly for internal use and by themes. Disables scrolling of XML root elements and <html>, <body> by arrow keys and mouse wheel.

                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                p {  
                                                                                                                                                                                                                                                                                                                     width: 12em;
                                                                                                                                                                                                                                                                                                                     border: dotted;
                                                                                                                                                                                                                                                                                                                     overflow: auto;   /* append scrollbars if necessary */ 
                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                overflow: hidden
                                                                                                                                                                                                                                                                                                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

                                                                                                                                                                                                                                                                                                                overflow: scroll
                                                                                                                                                                                                                                                                                                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

                                                                                                                                                                                                                                                                                                                overflow: auto
                                                                                                                                                                                                                                                                                                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

                                                                                                                                                                                                                                                                                                                overflow: auto
                                                                                                                                                                                                                                                                                                                short text

                                                                                                                                                                                                                                                                                                                visible (default)
                                                                                                                                                                                                                                                                                                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

                                                                                                                                                                                                                                                                                                                Notes

                                                                                                                                                                                                                                                                                                                Through Gecko 1.9.2 (Firefox 3.6), the overflow property is incorrectly applied to table-group elements (<thead> , <tbody> , <tfoot>). This behavior is corrected in later versions.

                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                Browser Lowest version
                                                                                                                                                                                                                                                                                                                Internet Explorer 4.0 [*]
                                                                                                                                                                                                                                                                                                                Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                Opera 4.0-7.0
                                                                                                                                                                                                                                                                                                                Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                [*] IE 4-6 enlarges an element with overflow:visible (default value) to fit the content in it. height/width behaves like min-height/min-width.

                                                                                                                                                                                                                                                                                                                See also

                                                                                                                                                                                                                                                                                                                Tags (2)

                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                Page last modified 09:44, 25 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                overflow-x - MDN

                                                                                                                                                                                                                                                                                                                  overflow-x

                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                  overflow-x specifies whether to clip content, render a scroll bar or display overflow content of a block-level element, when it overflows at the left and right edges.

                                                                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                                                                  overflow-x:  visible | hidden | scroll | auto
                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                  Values

                                                                                                                                                                                                                                                                                                                  visible
                                                                                                                                                                                                                                                                                                                  Content is not clipped, it may be rendered outside the content box.
                                                                                                                                                                                                                                                                                                                  hidden
                                                                                                                                                                                                                                                                                                                  The content is clipped and no scrollbars are provided.
                                                                                                                                                                                                                                                                                                                  scroll
                                                                                                                                                                                                                                                                                                                  The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
                                                                                                                                                                                                                                                                                                                  auto
                                                                                                                                                                                                                                                                                                                  Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                  View Live Examples (not available, please check later)

                                                                                                                                                                                                                                                                                                                  [fixme]
                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                  Notes

                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                  Browser Lowest Version
                                                                                                                                                                                                                                                                                                                  Internet Explorer 5.0 (*)
                                                                                                                                                                                                                                                                                                                  Firefox 1.5
                                                                                                                                                                                                                                                                                                                  Opera 9.5
                                                                                                                                                                                                                                                                                                                  Safari 3.0

                                                                                                                                                                                                                                                                                                                  (*) IE8 introduced -ms-overflow-x as a  synonym for overflow-x. Don't use the -ms- prefix.

                                                                                                                                                                                                                                                                                                                  See also

                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                  Tags (0)

                                                                                                                                                                                                                                                                                                                  Edit tags
                                                                                                                                                                                                                                                                                                                  • No tags

                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                  Page last modified 09:45, 25 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                  overflow-y - MDN

                                                                                                                                                                                                                                                                                                                    Page last modified 02:37, 9 Mar 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                    padding-bottom - MDN

                                                                                                                                                                                                                                                                                                                      padding-bottom

                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                      The padding-bottom property of an element sets the padding space required on the bottom of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.

                                                                                                                                                                                                                                                                                                                      • Initial value : 0
                                                                                                                                                                                                                                                                                                                      • Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
                                                                                                                                                                                                                                                                                                                      • Inherited : no
                                                                                                                                                                                                                                                                                                                      • Percentages: refer to width of closest block-level ancestor
                                                                                                                                                                                                                                                                                                                      • Media: visual
                                                                                                                                                                                                                                                                                                                      • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                                      padding-bottom: 
                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                      <length> | 
                                                                                                                                                                                                                                                                                                                      <percentage> | 
                                                                                                                                                                                                                                                                                                                      inherit;
                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                      Values

                                                                                                                                                                                                                                                                                                                      <length>
                                                                                                                                                                                                                                                                                                                      Specifies a positive fixed width. See <length> for details.
                                                                                                                                                                                                                                                                                                                      <percentage>
                                                                                                                                                                                                                                                                                                                      A percentage with respect to the width of the containing block.

                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                      .content { padding-bottom: 5%; }
                                                                                                                                                                                                                                                                                                                      .sidebox { padding-bottom: 10px; } 
                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                      Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                      Tags (2)

                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                      Page last modified 15:39, 16 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                      padding - MDN

                                                                                                                                                                                                                                                                                                                        padding

                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                        The padding CSS property sets the required padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

                                                                                                                                                                                                                                                                                                                        The padding property is a shortcut to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left).

                                                                                                                                                                                                                                                                                                                        • Initial value : 0
                                                                                                                                                                                                                                                                                                                        • Applies to: all elements (except table-*-group, table-row and table-column)
                                                                                                                                                                                                                                                                                                                        • Inherited : no
                                                                                                                                                                                                                                                                                                                        • Percentages: relative to the width of the containing block
                                                                                                                                                                                                                                                                                                                        • Media: visual
                                                                                                                                                                                                                                                                                                                        • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                        padding:   [ 
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                        <length>| 
                                                                                                                                                                                                                                                                                                                        <percentage>] {1,4}
                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                                                                                        Specifies one, two, three or four of the following values:

                                                                                                                                                                                                                                                                                                                        <length>
                                                                                                                                                                                                                                                                                                                        Specifies a positive fixed width. See <length> for details.
                                                                                                                                                                                                                                                                                                                        <percentage>
                                                                                                                                                                                                                                                                                                                        With respect to the width of the containing block.
                                                                                                                                                                                                                                                                                                                        • One single value applies to all 4 sides
                                                                                                                                                                                                                                                                                                                        • Two values apply to 1. top and bottom and 2. to the left and right side
                                                                                                                                                                                                                                                                                                                        • Three values apply to 1. top, 2. right and left and 3. to the bottom side
                                                                                                                                                                                                                                                                                                                        • Four values apply to 1. top, 2. right, 3. bottom and 4. to the left side

                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                         padding: 5%;               /* on all sides 5% padding */
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                         padding: 10px;              /* on all sides 10px padding */
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                         padding: 10px 20px;         /*  top and bottom 10px padding  */
                                                                                                                                                                                                                                                                                                                                                     /*  left and right 20px padding  */
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                         padding: 10px 3% 20px;      /*  top 10px padding          */
                                                                                                                                                                                                                                                                                                                                                     /*  left and right 3% padding */
                                                                                                                                                                                                                                                                                                                                                     /*  bottom 20px padding       */
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                         padding: 1em 3px 30px 5px;  /*  top    1em  padding  */
                                                                                                                                                                                                                                                                                                                                                     /*  right  3px  padding  */
                                                                                                                                                                                                                                                                                                                                                     /*  bottom 30px padding  */
                                                                                                                                                                                                                                                                                                                                                     /*  left   5px  padding  */
                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                        border:outset; padding:5% 1em;

                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                        Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                        Tags (2)

                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                        Page last modified 15:30, 16 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                        padding-left - MDN

                                                                                                                                                                                                                                                                                                                          padding-left

                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                          The padding-left property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.

                                                                                                                                                                                                                                                                                                                          • Initial value : 0
                                                                                                                                                                                                                                                                                                                          • Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
                                                                                                                                                                                                                                                                                                                          • Inherited : no
                                                                                                                                                                                                                                                                                                                          • Percentages: refer to width of closest block-level ancestor
                                                                                                                                                                                                                                                                                                                          • Media: visual
                                                                                                                                                                                                                                                                                                                          • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                          padding-left: 
                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                          <length> | 
                                                                                                                                                                                                                                                                                                                          <percentage> | 
                                                                                                                                                                                                                                                                                                                          inherit;
                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                                                                                          <length>
                                                                                                                                                                                                                                                                                                                          Specifies a positive fixed width. See <length> for details.
                                                                                                                                                                                                                                                                                                                          <percentage>
                                                                                                                                                                                                                                                                                                                          A percentage with respect to the width of the containing block.

                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                          .content { padding-left: 5%; }
                                                                                                                                                                                                                                                                                                                          .sidebox { padding-left: 10px; } 
                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                          Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                          Tags (2)

                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                          Page last modified 15:39, 16 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                          padding-right - MDN

                                                                                                                                                                                                                                                                                                                            padding-right

                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                            The padding-right property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

                                                                                                                                                                                                                                                                                                                            • Initial value : 0
                                                                                                                                                                                                                                                                                                                            • Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
                                                                                                                                                                                                                                                                                                                            • Inherited : no
                                                                                                                                                                                                                                                                                                                            • Percentages: refer to width of closest block-level ancestor
                                                                                                                                                                                                                                                                                                                            • Media: visual
                                                                                                                                                                                                                                                                                                                            • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                            padding-right: 
                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                            <length> | 
                                                                                                                                                                                                                                                                                                                            <percentage> | 
                                                                                                                                                                                                                                                                                                                            inherit;
                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                                                                                            <length>
                                                                                                                                                                                                                                                                                                                            Specifies a positive fixed width. See <length> for details.
                                                                                                                                                                                                                                                                                                                            <percentage>
                                                                                                                                                                                                                                                                                                                            A percentage with respect to the width of the containing block.

                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                            .content { padding-right: 5%; }
                                                                                                                                                                                                                                                                                                                            .sidebox { padding-right: 10px; } 
                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                            Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                            Tags (2)

                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                            Page last modified 15:38, 16 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                            padding-top - MDN

                                                                                                                                                                                                                                                                                                                              padding-top

                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                              The padding-top property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and it's border. A negative values is not allowed.

                                                                                                                                                                                                                                                                                                                              • Initial value : 0
                                                                                                                                                                                                                                                                                                                              • Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
                                                                                                                                                                                                                                                                                                                              • Inherited : no
                                                                                                                                                                                                                                                                                                                              • Percentages: refer to width of closest block-level ancestor
                                                                                                                                                                                                                                                                                                                              • Media: visual
                                                                                                                                                                                                                                                                                                                              • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                              padding-bottom: 
                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              <length> | 
                                                                                                                                                                                                                                                                                                                              <percentage> | 
                                                                                                                                                                                                                                                                                                                              inherit;
                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                              Values

                                                                                                                                                                                                                                                                                                                              <length>
                                                                                                                                                                                                                                                                                                                              Specifies a positive fixed width. See <length> for details.
                                                                                                                                                                                                                                                                                                                              <percentage>
                                                                                                                                                                                                                                                                                                                              A percentage with respect to the width of the containing block.

                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                              .content { padding-top: 5%; }
                                                                                                                                                                                                                                                                                                                              .sidebox { padding-top: 10px; } 
                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                              Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                              Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                              Tags (2)

                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                              Page last modified 15:38, 16 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                              page-break-after - MDN

                                                                                                                                                                                                                                                                                                                                page-break-after

                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                The page-break-after CSS property adjusts page breaks after the current element.

                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                page-break-after: auto | always | avoid | left | right | inherit
                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                                                auto
                                                                                                                                                                                                                                                                                                                                Initial value. Automatic page breaks (neither forced nor forbidden).
                                                                                                                                                                                                                                                                                                                                always
                                                                                                                                                                                                                                                                                                                                Always force page breaks after the element.
                                                                                                                                                                                                                                                                                                                                avoid Unimplemented
                                                                                                                                                                                                                                                                                                                                Avoid page breaks after the element.
                                                                                                                                                                                                                                                                                                                                left Unimplemented
                                                                                                                                                                                                                                                                                                                                Force page breaks after the element so that the next page is formatted as a left page.
                                                                                                                                                                                                                                                                                                                                right Unimplemented
                                                                                                                                                                                                                                                                                                                                Force page breaks after the element so that the next page is formatted as a right page.

                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                /* display headlines on a new page */
                                                                                                                                                                                                                                                                                                                                h1,h2, h3 { page-break-after:always; } 
                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                Basic support 1.0 1.0 (1.0) [*] 4.0 7.0 1.2 (125)
                                                                                                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                [*] Gecko only supports page-break-after:always. See bug 132035

                                                                                                                                                                                                                                                                                                                                Tags (4)

                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                Page last modified 04:11, 3 Jul 2011 by grendel

                                                                                                                                                                                                                                                                                                                                page-break-before - MDN

                                                                                                                                                                                                                                                                                                                                  page-break-before

                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                  The page-break-before CSS property adjusts page breaks before the current element.

                                                                                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                                                                                  page-break-before: auto | always | avoid | left | right | inherit
                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                  Values

                                                                                                                                                                                                                                                                                                                                  auto
                                                                                                                                                                                                                                                                                                                                  Initial value. Automatic page breaks (neither forced nor forbidden).
                                                                                                                                                                                                                                                                                                                                  always
                                                                                                                                                                                                                                                                                                                                  Always force page breaks before the element.
                                                                                                                                                                                                                                                                                                                                  avoid Unimplemented
                                                                                                                                                                                                                                                                                                                                  Avoid page breaks before the element.
                                                                                                                                                                                                                                                                                                                                  left Unimplemented
                                                                                                                                                                                                                                                                                                                                  Force page breaks before the element so that the next page is formatted as a left page.
                                                                                                                                                                                                                                                                                                                                  right Unimplemented
                                                                                                                                                                                                                                                                                                                                  Force page breaks before the element so that the next page is formatted as a right page.

                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                  /* avoid page break before the div */
                                                                                                                                                                                                                                                                                                                                  div.note { page-break-before: avoid;  } 
                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                  Basic support 1.0 1.0 (1.0) [*] 4.0 7.0 1.2 (125)
                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                  Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                  [*] Gecko only supports page-break-before:always. See bug 132035

                                                                                                                                                                                                                                                                                                                                  Tags (3)

                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                  Page last modified 04:09, 3 Jul 2011 by grendel

                                                                                                                                                                                                                                                                                                                                  page-break-inside - MDN

                                                                                                                                                                                                                                                                                                                                    page-break-inside

                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                    The page-break-inside CSS property adjusts page breaks inside the current element.

                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                    page-break-inside: auto | avoid | inherit
                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                                                                                                    auto
                                                                                                                                                                                                                                                                                                                                    Initial value. Automatic page breaks (neither forced nor forbidden).
                                                                                                                                                                                                                                                                                                                                    avoid
                                                                                                                                                                                                                                                                                                                                    Avoid page breaks before the element.

                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                    /* avoid page break inside the paragraph */
                                                                                                                                                                                                                                                                                                                                    p { page-break-inside: avoid;  } 
                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                    Basic support 1.0 -- 8.0 7.0 1.3 (312)
                                                                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                    Page last modified 04:04, 3 Jul 2011 by grendel

                                                                                                                                                                                                                                                                                                                                    @page - MDN

                                                                                                                                                                                                                                                                                                                                      @page

                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                      The @page rule is used to modify some CSS properties when printing a document.

                                                                                                                                                                                                                                                                                                                                      Note: you can not change all CSS properties. You can only change the margins, orphans, widows, and page breaks of the document. All other CSS properties will be ignored.

                                                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                                                      @page :pseudo-class {
                                                                                                                                                                                                                                                                                                                                        margin:2in;
                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                      Please refer to the various pseudo-classes of @page for examples.

                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                      Basic support 2.0 -- 8.0 6.0 5.0
                                                                                                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                      See also

                                                                                                                                                                                                                                                                                                                                      Tags (3)

                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                      Page last modified 07:39, 17 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                      perspective - MDN

                                                                                                                                                                                                                                                                                                                                        perspective

                                                                                                                                                                                                                                                                                                                                        This is an experimental feature
                                                                                                                                                                                                                                                                                                                                        Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                        The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element that is placed between the z=0 and the user is enlarged, each 3D-element with z<0 is shrinked. How much deformation is defined by the value of this property.

                                                                                                                                                                                                                                                                                                                                        Part of the 3D-elements that are behind the user, i.e. that their z-axis coordinate is greater than the value of the perspective CSS property are not drawn.

                                                                                                                                                                                                                                                                                                                                        The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.

                                                                                                                                                                                                                                                                                                                                        Using this property with a value different than 0 and none creates a new stacking context.

                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                        perspective: none     or
                                                                                                                                                                                                                                                                                                                                        perspective: depth
                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                        where :

                                                                                                                                                                                                                                                                                                                                        none
                                                                                                                                                                                                                                                                                                                                        Is a keyword indicating that no perspective transform has to be applied.
                                                                                                                                                                                                                                                                                                                                        depth
                                                                                                                                                                                                                                                                                                                                        Is a <length> giving the distance from the user to the z=0 plane. It used to apply a perspective transform to the element and its content. If it 0 or a negative value, no perspective transform is applied.

                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                        perspective:150px; perspective:300px; perspective:600px;
                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                        1
                                                                                                                                                                                                                                                                                                                                        2
                                                                                                                                                                                                                                                                                                                                        3
                                                                                                                                                                                                                                                                                                                                        4
                                                                                                                                                                                                                                                                                                                                        5
                                                                                                                                                                                                                                                                                                                                        6
                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                        1
                                                                                                                                                                                                                                                                                                                                        2
                                                                                                                                                                                                                                                                                                                                        3
                                                                                                                                                                                                                                                                                                                                        4
                                                                                                                                                                                                                                                                                                                                        5
                                                                                                                                                                                                                                                                                                                                        6
                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                        1
                                                                                                                                                                                                                                                                                                                                        2
                                                                                                                                                                                                                                                                                                                                        3
                                                                                                                                                                                                                                                                                                                                        4
                                                                                                                                                                                                                                                                                                                                        5
                                                                                                                                                                                                                                                                                                                                        6

                                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                                        Specification Status Comment
                                                                                                                                                                                                                                                                                                                                        CSS 3D Transforms Level 3 Working Draft  

                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                        Basic support 12 -webkit 10.0 (10) -moz 10 -ms -- (Supported) -webkit
                                                                                                                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                        Basic support 3.0 -webkit 10.0 (10) -moz ? -- (Supported) -webkit

                                                                                                                                                                                                                                                                                                                                        See also

                                                                                                                                                                                                                                                                                                                                        Tags (4)

                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                        Page last modified 11:37, 1 Nov 2011 by teoli

                                                                                                                                                                                                                                                                                                                                        perspective-origin - MDN

                                                                                                                                                                                                                                                                                                                                          perspective-origin

                                                                                                                                                                                                                                                                                                                                          This is an experimental feature
                                                                                                                                                                                                                                                                                                                                          Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                          The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                          perspective-origin: x-position                           or
                                                                                                                                                                                                                                                                                                                                          perspective-origin: x-position y-position
                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                          When both x-position and y-position are keywords, the following is also valid:
                                                                                                                                                                                                                                                                                                                                          perspective-origin: y-position x-position
                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                          where :

                                                                                                                                                                                                                                                                                                                                          x-position
                                                                                                                                                                                                                                                                                                                                          Indicates the position of the abscissa of the vanishing point. It can have one of the following values:
                                                                                                                                                                                                                                                                                                                                          • <percentage> indicating the position relative to the width of the element. The value may be negative.
                                                                                                                                                                                                                                                                                                                                          • <length> indicating the position using a length value. The value may be negative.
                                                                                                                                                                                                                                                                                                                                          • left, a keyword being a shortcut for the 0 length value.
                                                                                                                                                                                                                                                                                                                                          • center, a keyword being a shortcut for the 50% percentage value.
                                                                                                                                                                                                                                                                                                                                          • right, a keyword being a shortcut for the 100% percentage value.
                                                                                                                                                                                                                                                                                                                                          y-position
                                                                                                                                                                                                                                                                                                                                          Indicates the position of the ordinate of the vanishing point. It can have one of the following values:
                                                                                                                                                                                                                                                                                                                                          • <percentage> indicating the position relative to the height of the element. The value may be negative.
                                                                                                                                                                                                                                                                                                                                          • <length> indicating the position using a length value. The value may be negative.
                                                                                                                                                                                                                                                                                                                                          • top, a keyword being a shortcut for the 0 length value.
                                                                                                                                                                                                                                                                                                                                          • center, a keyword being a shortcut for the 50% percentage value.
                                                                                                                                                                                                                                                                                                                                          • bottom, a keyword being a shortcut for the 100% percentage value.

                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                          perspective-origin:top left; perspective-origin:top; perspective-origin:top right;
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          perspective-origin:left; perspective-origin:50% 50%; perspective-origin:right;
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          perspective-origin:bottom left; perspective-origin:bottom; perspective-origin:bottom right;
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6
                                                                                                                                                                                                                                                                                                                                          1
                                                                                                                                                                                                                                                                                                                                          2
                                                                                                                                                                                                                                                                                                                                          3
                                                                                                                                                                                                                                                                                                                                          4
                                                                                                                                                                                                                                                                                                                                          5
                                                                                                                                                                                                                                                                                                                                          6

                                                                                                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                                                                                                          Specification Status Comment
                                                                                                                                                                                                                                                                                                                                          CSS 3D Transforms Level 3 Working Draft  

                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                          Basic support 12 -webkit 10.0 (10) -moz 10 -ms -- (Supported) -webkit
                                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                          Basic support 3.0 -webkit 10.0 (10) -moz ? -- (Supported) -webkit

                                                                                                                                                                                                                                                                                                                                          See also

                                                                                                                                                                                                                                                                                                                                          Tags (4)

                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                          Page last modified 14:33, 1 Nov 2011 by teoli

                                                                                                                                                                                                                                                                                                                                          pointer-events - MDN

                                                                                                                                                                                                                                                                                                                                            pointer-events

                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                            The CSS property pointer-events allows authors to control whether or when an element may be the target of a mouse event. This property is used to specify under which circumstance (if any) a mouse event should go "through" an element and target whatever is "underneath" that element instead.

                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                            pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                                                                                                            auto
                                                                                                                                                                                                                                                                                                                                            The element behaves as it would if the pointer-events property was not specified. In SVG content this value and the value visiblePainted have the same effect.
                                                                                                                                                                                                                                                                                                                                            none
                                                                                                                                                                                                                                                                                                                                            The element is never the target of mouse events, although mouse events may target its descendant elements if those descendants have pointer-events set to some other value, in which case mouse events will trigger event listeners on this element as appropriate on their way to/from the descendant during the event capture/bubble phases.
                                                                                                                                                                                                                                                                                                                                            visiblePainted
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none.
                                                                                                                                                                                                                                                                                                                                            visibleFill
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not effect event processing.
                                                                                                                                                                                                                                                                                                                                            visibleStroke
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not effect event processing.
                                                                                                                                                                                                                                                                                                                                            visible
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can be the target of a mouse event when the visibility property is set to visible and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not effect event processing.
                                                                                                                                                                                                                                                                                                                                            painted
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none. The value of the visibility property does not effect event processing.
                                                                                                                                                                                                                                                                                                                                            fill
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not effect event processing.
                                                                                                                                                                                                                                                                                                                                            stroke
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility properties do not effect event processing.
                                                                                                                                                                                                                                                                                                                                            all
                                                                                                                                                                                                                                                                                                                                            SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility properties do not effect event processing.

                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                            View Live Examples (not available, please check later)

                                                                                                                                                                                                                                                                                                                                            Notes

                                                                                                                                                                                                                                                                                                                                            Note that preventing an element from being the target of mouse events by using pointer-events does not necessarily mean that mouse event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of mouse events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any mouse activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

                                                                                                                                                                                                                                                                                                                                            Mozilla and other W3C members would like to provide finer grained control (than just auto and none) in HTML for which parts of an element will cause it to "catch" mouse events, and when. To help us in deciding how pointer-events should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of this wiki page (don't worry about keeping it tidy), or else send them to Jonathan Watt.

                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                            SVG support 1.0 1.5 (1.8) -- 9.0 (2.0) 3.0 (522)
                                                                                                                                                                                                                                                                                                                                            HTML/XML content 2.0 3.6 (1.9.2) -- -- 4.0 (530)
                                                                                                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                                            See also

                                                                                                                                                                                                                                                                                                                                            Tags (8)

                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                            Page last modified 13:31, 26 May 2011 by Sheppy

                                                                                                                                                                                                                                                                                                                                            position - MDN

                                                                                                                                                                                                                                                                                                                                              position

                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                              The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

                                                                                                                                                                                                                                                                                                                                              A positioned element is an element whose computed position property is relative, absolute, or fixed.

                                                                                                                                                                                                                                                                                                                                              An absolutely positioned element is an element whose computed position property is absolute or fixed.

                                                                                                                                                                                                                                                                                                                                              The top, right, bottom, and left properties specify the position of positioned elements.

                                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                                              position:  static | relative | absolute | fixed | 
                                                                                                                                                                                                                                                                                                                                              inherit

                                                                                                                                                                                                                                                                                                                                              Values

                                                                                                                                                                                                                                                                                                                                              static
                                                                                                                                                                                                                                                                                                                                              Normal behavior.  The top, right, bottom, and left properties do not apply.
                                                                                                                                                                                                                                                                                                                                              relative
                                                                                                                                                                                                                                                                                                                                              Lay out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).  The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
                                                                                                                                                                                                                                                                                                                                              absolute
                                                                                                                                                                                                                                                                                                                                              Do not leave space for the element.  Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
                                                                                                                                                                                                                                                                                                                                              fixed
                                                                                                                                                                                                                                                                                                                                              Do not leave space for the element.  Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                              Relative positioning

                                                                                                                                                                                                                                                                                                                                              To position an element relatively 20px from the top and left of its normal position, the following CSS is used.

                                                                                                                                                                                                                                                                                                                                              #two { position: relative; top: 20px; left: 20px; }
                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                               Note how the other elements are displayed as if "Two" were in it's normal position and taking up space.

                                                                                                                                                                                                                                                                                                                                              Absolute positioning

                                                                                                                                                                                                                                                                                                                                              Elements that are positioned relatively are still considered to be in the normal flow of elements in the document.  In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.  The absolutely positioned element is positioned relative to nearest positioned ancestor.  If a positioned ancestor doesn't exist, the initial container is used.

                                                                                                                                                                                                                                                                                                                                              In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:

                                                                                                                                                                                                                                                                                                                                              #ancestor { position: relative; background: #ddf; width: 500px; }
                                                                                                                                                                                                                                                                                                                                              #two { position: absolute; top: 20px; left: 20px; }
                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                              If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.

                                                                                                                                                                                                                                                                                                                                              Fixed positioning

                                                                                                                                                                                                                                                                                                                                              Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.  This is often used to create a floating element that stays in the same position even after scrolling the page.  In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:

                                                                                                                                                                                                                                                                                                                                              #one { position: fixed; top: 80px; left: 20px }
                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                              When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport:

                                                                                                                                                                                                                                                                                                                                              fixed-1.png

                                                                                                                                                                                                                                                                                                                                              fixed-2.png

                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                              Notes

                                                                                                                                                                                                                                                                                                                                              For relatively positioned elements, the top or bottom property specifies the vertical offset from the normal position and the left or right property specifies the horizontal offset.

                                                                                                                                                                                                                                                                                                                                              For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to). The margin of the element is then positioned inside these offsets.

                                                                                                                                                                                                                                                                                                                                              Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.

                                                                                                                                                                                                                                                                                                                                              Except for the case just described of absolutely positioned elements filling the available space:

                                                                                                                                                                                                                                                                                                                                              • If both top and bottom are specified (technically, not auto), top wins.
                                                                                                                                                                                                                                                                                                                                              • If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Arabic, Hebrew, etc.).

                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                              Basic support 1.0 1.0 (1.0) 4.0 4.0 1.0 (85)
                                                                                                                                                                                                                                                                                                                                              fixed value 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
                                                                                                                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                              Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                              See also

                                                                                                                                                                                                                                                                                                                                              display, float, top, right, bottom, left

                                                                                                                                                                                                                                                                                                                                              Tags (2)

                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                              Attachments (4)

                                                                                                                                                                                                                                                                                                                                              FileSizeDateAttached by 
                                                                                                                                                                                                                                                                                                                                               absolute-positioning.png
                                                                                                                                                                                                                                                                                                                                              Absolute Positioning Example
                                                                                                                                                                                                                                                                                                                                              2.11 kB19:43, 28 Jan 2011mmclarkActions
                                                                                                                                                                                                                                                                                                                                              fixed-1.png
                                                                                                                                                                                                                                                                                                                                              Fixed position example (before scrolling)
                                                                                                                                                                                                                                                                                                                                              16.89 kB20:13, 28 Jan 2011mmclarkActions
                                                                                                                                                                                                                                                                                                                                              fixed-2.png
                                                                                                                                                                                                                                                                                                                                              Fixed position example (after scrolling)
                                                                                                                                                                                                                                                                                                                                              14.21 kB20:13, 28 Jan 2011mmclarkActions
                                                                                                                                                                                                                                                                                                                                               relative-positioning.png
                                                                                                                                                                                                                                                                                                                                              Relative Positioning Example
                                                                                                                                                                                                                                                                                                                                              2.51 kB19:30, 28 Jan 2011mmclarkActions

                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                              Page last modified 03:18, 3 Jul 2011 by grendel

                                                                                                                                                                                                                                                                                                                                              quotes - MDN

                                                                                                                                                                                                                                                                                                                                                quotes

                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                The quotes property indicates how user agents should render quotation marks.

                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                quotes:  [<string> <string>]+ | none | inherit
                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                                                                none
                                                                                                                                                                                                                                                                                                                                                The open-quote and close-quote values of the content property produce no quotation marks.
                                                                                                                                                                                                                                                                                                                                                [<string> <string>]+
                                                                                                                                                                                                                                                                                                                                                One or more pairs of <string> values for open-quote and close-quote. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.

                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                q { quotes: '"' '"' "'" "'" }
                                                                                                                                                                                                                                                                                                                                                q:before { content: open-quote }
                                                                                                                                                                                                                                                                                                                                                q:after  { content: close-quote }
                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                Notes

                                                                                                                                                                                                                                                                                                                                                Starting in Firefox 3.5, the initial value of the quotes property can be read using -moz-initial This wasn't possible in earlier versions of Firefox.

                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                Basic support 11 1.5 8.0 4.0 ?
                                                                                                                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                See also

                                                                                                                                                                                                                                                                                                                                                content

                                                                                                                                                                                                                                                                                                                                                Tags (2)

                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                Page last modified 08:45, 10 Nov 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                :required - MDN

                                                                                                                                                                                                                                                                                                                                                  :required

                                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                  The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.

                                                                                                                                                                                                                                                                                                                                                  The :optional pseudo-class may be used to provide an appearance for optional form fields.

                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                  See :invalid for an example.

                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                  Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                  Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                  Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                                                                                                                                                  Opera 9.5

                                                                                                                                                                                                                                                                                                                                                  Safari | Chrome | WebKit

                                                                                                                                                                                                                                                                                                                                                  5 | 8 | 534.10

                                                                                                                                                                                                                                                                                                                                                  Tags (5)

                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                  Page last modified 12:51, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                  resize - MDN

                                                                                                                                                                                                                                                                                                                                                    resize

                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                    The resize CSS property lets you control the resizability of an element.

                                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                                    resize: none | both | horizontal | vertical | inherit
                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                                                                                                                    none
                                                                                                                                                                                                                                                                                                                                                    The element offers no user-controllable method for resizing the element.
                                                                                                                                                                                                                                                                                                                                                    both
                                                                                                                                                                                                                                                                                                                                                    The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
                                                                                                                                                                                                                                                                                                                                                    horizontal
                                                                                                                                                                                                                                                                                                                                                    The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
                                                                                                                                                                                                                                                                                                                                                    vertical
                                                                                                                                                                                                                                                                                                                                                    The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
                                                                                                                                                                                                                                                                                                                                                    Note: resize does not apply to blocks for which the overflow property is set to visible.

                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                    Disabling resizability of textareas

                                                                                                                                                                                                                                                                                                                                                    By default, <textarea> elements are resizable in Gecko 2.0 (Firefox 4). You may override this behavior with the CSS shown below:

                                                                                                                                                                                                                                                                                                                                                    textarea.example {
                                                                                                                                                                                                                                                                                                                                                      resize: none; /* disables resizability */
                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                    Using resize with arbitrary elements

                                                                                                                                                                                                                                                                                                                                                    You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph ( <p> element:

                                                                                                                                                                                                                                                                                                                                                    <div style="resize:both; overflow:scroll; width:300px; height:300px; border:1px solid black">
                                                                                                                                                                                                                                                                                                                                                      <p style="resize:both; overflow:scroll; width:200px; height:200px; border:1px solid black">
                                                                                                                                                                                                                                                                                                                                                        This paragraph is resizable, because the CSS resize property is set to 'both' on this
                                                                                                                                                                                                                                                                                                                                                        element.
                                                                                                                                                                                                                                                                                                                                                      </p>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    arbitrary.png

                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                    View the live example

                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                    Basic support 1.0 4.0 (2.0) -- -- 3.0 (522)
                                                                                                                                                                                                                                                                                                                                                    Applies to  <textarea> block-level and replaced elements, table cells, and inline blocks (unless overflow is visible)     <textarea>
                                                                                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                    Specification

                                                                                                                                                                                                                                                                                                                                                    See also

                                                                                                                                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                    Attachments (1)

                                                                                                                                                                                                                                                                                                                                                    FileSizeDateAttached by 
                                                                                                                                                                                                                                                                                                                                                     arbitrary.png
                                                                                                                                                                                                                                                                                                                                                    No description
                                                                                                                                                                                                                                                                                                                                                    14.93 kB23:32, 7 Feb 2011SheppyActions

                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                    Page last modified 03:16, 3 Jul 2011 by grendel

                                                                                                                                                                                                                                                                                                                                                    :right - MDN

                                                                                                                                                                                                                                                                                                                                                      :right

                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                      The :right page pseudo-class matches any right page when printing a page. It allows to describe the styling of right-side page.

                                                                                                                                                                                                                                                                                                                                                      Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page and if it has a major writing direction of right-to-left then it will be a :left page.

                                                                                                                                                                                                                                                                                                                                                      Note: You can't change all CSS properties. You can only change the the margin, padding, border, and background properties of the page box. All other CSS properties will be ignored, and only the page box, not the document content on the page, will be affected.

                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                      @page :right {
                                                                                                                                                                                                                                                                                                                                                        margin: 2in 3in;
                                                                                                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                      Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                      Internet Explorer
                                                                                                                                                                                                                                                                                                                                                      8.0
                                                                                                                                                                                                                                                                                                                                                      Firefox (Gecko) ---
                                                                                                                                                                                                                                                                                                                                                      Opera
                                                                                                                                                                                                                                                                                                                                                      9.2
                                                                                                                                                                                                                                                                                                                                                      Safari (WebKit) ---

                                                                                                                                                                                                                                                                                                                                                      See also

                                                                                                                                                                                                                                                                                                                                                      Tags (5)

                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                      Page last modified 07:46, 25 Oct 2011 by berkerpeksag

                                                                                                                                                                                                                                                                                                                                                      right - MDN

                                                                                                                                                                                                                                                                                                                                                        right

                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                        The right property specifies part of the position of positioned elements.

                                                                                                                                                                                                                                                                                                                                                        For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the right margin edge of the element and the right edge of its containing block.

                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                        right: <length> | <percentage> | auto | inherit ;
                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                                                                                                                        <length> 
                                                                                                                                                                                                                                                                                                                                                        A length, can be negative, zero, or positive.
                                                                                                                                                                                                                                                                                                                                                        <percentage> 
                                                                                                                                                                                                                                                                                                                                                        A percentage of the containing block's width.

                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                        View the live example

                                                                                                                                                                                                                                                                                                                                                        #example_3 {
                                                                                                                                                                                                                                                                                                                                                          width: 600px;
                                                                                                                                                                                                                                                                                                                                                          height: 400px;
                                                                                                                                                                                                                                                                                                                                                          background-color: #FFC7E4;
                                                                                                                                                                                                                                                                                                                                                          position: relative;
                                                                                                                                                                                                                                                                                                                                                          top: 20px;
                                                                                                                                                                                                                                                                                                                                                          left: 20px;
                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                        #example_4 {
                                                                                                                                                                                                                                                                                                                                                          width:200px;
                                                                                                                                                                                                                                                                                                                                                          height:200px;
                                                                                                                                                                                                                                                                                                                                                          background-color: #FFD7C2;
                                                                                                                                                                                                                                                                                                                                                          position:absolute;
                                                                                                                                                                                                                                                                                                                                                          bottom:10px;
                                                                                                                                                                                                                                                                                                                                                          right: 20px;
                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                        Notes

                                                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                        Basic support 1.0 1.0 (1.7 or earlier) 5.5 5 1.0
                                                                                                                                                                                                                                                                                                                                                        Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                        See also

                                                                                                                                                                                                                                                                                                                                                        position, top, bottom, left

                                                                                                                                                                                                                                                                                                                                                        Tags (3)

                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                        Page last modified 08:47, 10 Nov 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                        :root - MDN

                                                                                                                                                                                                                                                                                                                                                          :root

                                                                                                                                                                                                                                                                                                                                                          Table of contents

                                                                                                                                                                                                                                                                                                                                                          1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                          2. 2. Specifications
                                                                                                                                                                                                                                                                                                                                                          3. 3. Browser compatibility

                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                          The :root pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specifity is higher.

                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                          Basic support 1 1.0 (1.7) 9 9.5 1.0
                                                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                          Tags (4)

                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                          Page last modified 10:35, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                          ::-moz-selection | ::selection - MDN

                                                                                                                                                                                                                                                                                                                                                            ::-moz-selection | ::selection

                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference « CSS Reference:Mozilla Extensions

                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                            The ::-moz-selection (::selection) pseudo-element applies to the portion of a document that has been highlighted (e.g. selected with the mouse) by the user.

                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                            /* draw any selected text yellow on red background */
                                                                                                                                                                                                                                                                                                                                                            ::-moz-selection { color: gold;  background: red; }
                                                                                                                                                                                                                                                                                                                                                            ::selection      { color: gold;  background: red; }
                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                            /* draw selected text in a paragraph white on black */
                                                                                                                                                                                                                                                                                                                                                            p::-moz-selection { color: white;  background: black; }
                                                                                                                                                                                                                                                                                                                                                            p::selection      { color: white;  background: black; }

                                                                                                                                                                                                                                                                                                                                                            Notes

                                                                                                                                                                                                                                                                                                                                                            Gecko/Firefox supports ::-moz-selection, use also ::selection for some other browsers.

                                                                                                                                                                                                                                                                                                                                                            The following properties apply to ::-moz-selection :
                                                                                                                                                                                                                                                                                                                                                            color, background and background-color (background-image is ignored).

                                                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                                                            ::selection was drafted for CSS3 Selectors but removed from the current CSS3 draft. Anyhow, it's implemented in browsers and support will continue.

                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                            Requires two different rules with identical declarations as stated in the examples above.

                                                                                                                                                                                                                                                                                                                                                            Browser Lowest Version Support of
                                                                                                                                                                                                                                                                                                                                                            Internet Explorer 9 ::selection
                                                                                                                                                                                                                                                                                                                                                            Firefox (Gecko) 1.0 (1.5) ::-moz-selection
                                                                                                                                                                                                                                                                                                                                                            Opera 9.5 ::selection
                                                                                                                                                                                                                                                                                                                                                            Safari (WebKit) 1.1 (100) ::selection

                                                                                                                                                                                                                                                                                                                                                            Tags (3)

                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                            Page last modified 10:33, 14 May 2010 by rubena

                                                                                                                                                                                                                                                                                                                                                            table-layout - MDN

                                                                                                                                                                                                                                                                                                                                                              table-layout

                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                              table-layout property defines the algorithm to be used to layout the table cells, rows, and columns.

                                                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                                                              table-layout: inherit | auto | fixed 
                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                              Values

                                                                                                                                                                                                                                                                                                                                                              inherit
                                                                                                                                                                                                                                                                                                                                                              auto
                                                                                                                                                                                                                                                                                                                                                              An automatic table layout algorithm is commonly used by most browsers for table layout. The width of the table and its cells depends on the content thereof.
                                                                                                                                                                                                                                                                                                                                                              fixed
                                                                                                                                                                                                                                                                                                                                                              Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

                                                                                                                                                                                                                                                                                                                                                              Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.

                                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                                              View Live Examples

                                                                                                                                                                                                                                                                                                                                                              .contentbox {
                                                                                                                                                                                                                                                                                                                                                                table-layout: fixed;
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                              Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                              Internet Explorer 5.0
                                                                                                                                                                                                                                                                                                                                                              Firefox 1.0
                                                                                                                                                                                                                                                                                                                                                              Opera 7.0
                                                                                                                                                                                                                                                                                                                                                              Safari 1.0

                                                                                                                                                                                                                                                                                                                                                              Tags (2)

                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                              Page last modified 16:08, 25 Mar 2010 by Sheppy

                                                                                                                                                                                                                                                                                                                                                              tab-size - MDN

                                                                                                                                                                                                                                                                                                                                                                tab-size

                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                The tab-size CSS property is used to customize the width of a tab (U+0009) character.

                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                tab-size: <integer> | inherit
                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                                                                                <integer>
                                                                                                                                                                                                                                                                                                                                                                The number of spaces in a tab. Must be positive.
                                                                                                                                                                                                                                                                                                                                                                inherit
                                                                                                                                                                                                                                                                                                                                                                Inherits from the parent element.

                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                pre {
                                                                                                                                                                                                                                                                                                                                                                  tab-size: 99; /* Don't use tabs! */
                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                Browser Lowest Version Support of
                                                                                                                                                                                                                                                                                                                                                                Internet Explorer --- ---
                                                                                                                                                                                                                                                                                                                                                                Firefox 4.0 (Gecko 2.0) -moz-tab-size
                                                                                                                                                                                                                                                                                                                                                                Opera 10.60 -o-tab-size
                                                                                                                                                                                                                                                                                                                                                                Safari (WebKit) --- ---

                                                                                                                                                                                                                                                                                                                                                                See also

                                                                                                                                                                                                                                                                                                                                                                Tags (3)

                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                Page last modified 13:13, 18 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                :target - MDN

                                                                                                                                                                                                                                                                                                                                                                  :target

                                                                                                                                                                                                                                                                                                                                                                  Table of contents

                                                                                                                                                                                                                                                                                                                                                                    1. 1.1. Summary
                                                                                                                                                                                                                                                                                                                                                                    2. 1.2. Examples
                                                                                                                                                                                                                                                                                                                                                                    3. 1.3. Note
                                                                                                                                                                                                                                                                                                                                                                  1. 2. Browser compatibility
                                                                                                                                                                                                                                                                                                                                                                    1. 2.1. Specifications
                                                                                                                                                                                                                                                                                                                                                                    2. 2.2. See also
                                                                                                                                                                                                                                                                                                                                                                  Table of contents
                                                                                                                                                                                                                                                                                                                                                                    1. 1.1. Summary
                                                                                                                                                                                                                                                                                                                                                                    2. 1.2. Examples
                                                                                                                                                                                                                                                                                                                                                                    3. 1.3. Note
                                                                                                                                                                                                                                                                                                                                                                  1. 2. Browser compatibility
                                                                                                                                                                                                                                                                                                                                                                    1. 2.1. Specifications
                                                                                                                                                                                                                                                                                                                                                                    2. 2.2. See also

                                                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                  The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..

                                                                                                                                                                                                                                                                                                                                                                  URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section2:
                                                                                                                                                                                                                                                                                                                                                                    http://example.com/folder/document.html#section2
                                                                                                                                                                                                                                                                                                                                                                  The anchor can be any element with an id attribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the :target pseudo-class.

                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                  :target { outline: solid red }  /* draw a red, solid line around the target element */
                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                  /* example code for userContent.css or any web pages;
                                                                                                                                                                                                                                                                                                                                                                     a red/yellow arrow indicates the target element */  
                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                  :target { 
                                                                                                                                                                                                                                                                                                                                                                      -moz-box-shadow:  0.2em 0.2em 0.3em #888;
                                                                                                                                                                                                                                                                                                                                                                   -webkit-box-shadow:  0.2em 0.2em 0.3em #888;
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                  :target:before {
                                                                                                                                                                                                                                                                                                                                                                    font:           70% Arial,"Nimbus Sans L",sans-serif !important;
                                                                                                                                                                                                                                                                                                                                                                    content:        "\25ba";  /* ► */
                                                                                                                                                                                                                                                                                                                                                                    color:          red;
                                                                                                                                                                                                                                                                                                                                                                    background:     gold;
                                                                                                                                                                                                                                                                                                                                                                    border:         solid thin;
                                                                                                                                                                                                                                                                                                                                                                    padding-left:   1px;
                                                                                                                                                                                                                                                                                                                                                                    display:        inline-block;
                                                                                                                                                                                                                                                                                                                                                                    margin-right:   0.13em;
                                                                                                                                                                                                                                                                                                                                                                    vertical-align: 20%;
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                  Note

                                                                                                                                                                                                                                                                                                                                                                  The id attribute was new in HTML 4 (December 1997).  In old-style HTML <a name="foo"> is a target element.  The :target pseudo-class applies to those targets as well.

                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                  Basic support ? (1.3) 9 9.5 1.3
                                                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                  Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                  Page last modified 12:06, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                  text-align - MDN

                                                                                                                                                                                                                                                                                                                                                                    text-align

                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                    The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

                                                                                                                                                                                                                                                                                                                                                                    • Initial value : a nameless value that acts as left if 'direction' is 'ltr', right if 'direction' is 'rtl'
                                                                                                                                                                                                                                                                                                                                                                    • Applies to: block level elements, table cells and inline-blocks
                                                                                                                                                                                                                                                                                                                                                                    • Inherited : yes
                                                                                                                                                                                                                                                                                                                                                                    • Media: visual
                                                                                                                                                                                                                                                                                                                                                                    • Computed value : as specified

                                                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                                                     text-align:  left | center | right | justify | start | end | -moz-left | -moz-center | -moz-right | 
                                                                                                                                                                                                                                                                                                                                                                    inherit
                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                                                                                                                                    left
                                                                                                                                                                                                                                                                                                                                                                    The inline contents are aligned to the left edge of the line box.
                                                                                                                                                                                                                                                                                                                                                                    right
                                                                                                                                                                                                                                                                                                                                                                    The inline contents are aligned to the right edge of the line box.
                                                                                                                                                                                                                                                                                                                                                                    center
                                                                                                                                                                                                                                                                                                                                                                    The inline contents are centered within the line box.
                                                                                                                                                                                                                                                                                                                                                                    justify
                                                                                                                                                                                                                                                                                                                                                                    The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
                                                                                                                                                                                                                                                                                                                                                                    start
                                                                                                                                                                                                                                                                                                                                                                    The same as left if direction is left-to-right and right if direction is right-to-left.
                                                                                                                                                                                                                                                                                                                                                                    end Requires Gecko 1.9.2
                                                                                                                                                                                                                                                                                                                                                                    The same as right if direction is left-to-right and left if direction is right-to-left.

                                                                                                                                                                                                                                                                                                                                                                    Mozilla Extensions

                                                                                                                                                                                                                                                                                                                                                                    -moz-center
                                                                                                                                                                                                                                                                                                                                                                    Centers inline and also block content.
                                                                                                                                                                                                                                                                                                                                                                    -moz-left
                                                                                                                                                                                                                                                                                                                                                                    Aligns inline and also block content.
                                                                                                                                                                                                                                                                                                                                                                    -moz-right
                                                                                                                                                                                                                                                                                                                                                                    Aligns inline and also block content.

                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                    View Live Examples

                                                                                                                                                                                                                                                                                                                                                                    Live Examples

                                                                                                                                                                                                                                                                                                                                                                    div { text-align: center; border:solid; }

                                                                                                                                                                                                                                                                                                                                                                    p { background:gold; width:22em; }

                                                                                                                                                                                                                                                                                                                                                                    some more inline content...
                                                                                                                                                                                                                                                                                                                                                                    div { text-align: center; border:solid; }

                                                                                                                                                                                                                                                                                                                                                                    p { background:gold; width:22em; margin: 1em auto; }

                                                                                                                                                                                                                                                                                                                                                                    some more inline content...
                                                                                                                                                                                                                                                                                                                                                                    div { text-align:-moz-center; text-align:-webkit-center; border:solid; }

                                                                                                                                                                                                                                                                                                                                                                    p { background:gold; width:22em; }

                                                                                                                                                                                                                                                                                                                                                                    some more inline content...

                                                                                                                                                                                                                                                                                                                                                                    Notes

                                                                                                                                                                                                                                                                                                                                                                    The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.:
                                                                                                                                                                                                                                                                                                                                                                    margin:auto;  or  margin:0 auto;  or  margin-left:auto; margin-right:auto;

                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                    Browser Basic support Block alignment values start value end value
                                                                                                                                                                                                                                                                                                                                                                    Internet Explorer 3.0 --- --- ---
                                                                                                                                                                                                                                                                                                                                                                    Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) -moz-left | -moz-center | -moz-right 1.0 (1.0) 3.6 (1.9.2)
                                                                                                                                                                                                                                                                                                                                                                    Opera 3.5 --- --- ---
                                                                                                                                                                                                                                                                                                                                                                    Safari (WebKit) 1.0 (85) 1.0 (85) -khtml-left | -khtml-center | -khtml-right 3.1 (525) 3.1 (525)
                                                                                                                                                                                                                                                                                                                                                                    1.3 (312) -khtml-left | -khtml-center | -khtml-right |
                                                                                                                                                                                                                                                                                                                                                                    -webkit-left | -webkit-center | -webkit-right

                                                                                                                                                                                                                                                                                                                                                                    Tags (2)

                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                    Page last modified 12:00, 28 Apr 2010 by Elchi3

                                                                                                                                                                                                                                                                                                                                                                    text-decoration-color - MDN

                                                                                                                                                                                                                                                                                                                                                                      text-decoration-color

                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                      The text-decoration-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by text-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.

                                                                                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                                                                                      text-decoration-color: <color> | inherit
                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                      Values

                                                                                                                                                                                                                                                                                                                                                                      <color>
                                                                                                                                                                                                                                                                                                                                                                      The color property accepts various keywords and numeric notations. See <color> values for more details.

                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                      .example { 
                                                                                                                                                                                                                                                                                                                                                                          text-decoration: underline;
                                                                                                                                                                                                                                                                                                                                                                          text-decoration-color: red;
                                                                                                                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                                                                                                                      The example above has the same effect as the following code, which also adds a hover style.

                                                                                                                                                                                                                                                                                                                                                                      <!DOCTYPE html>
                                                                                                                                                                                                                                                                                                                                                                      <html>
                                                                                                                                                                                                                                                                                                                                                                      <head>
                                                                                                                                                                                                                                                                                                                                                                      <style>
                                                                                                                                                                                                                                                                                                                                                                      .example {
                                                                                                                                                                                                                                                                                                                                                                        font-size: 24px;
                                                                                                                                                                                                                                                                                                                                                                        text-decoration: underline;
                                                                                                                                                                                                                                                                                                                                                                        color: red;
                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                      .example:hover {
                                                                                                                                                                                                                                                                                                                                                                        color: blue;
                                                                                                                                                                                                                                                                                                                                                                        text-decoration: line-through;
                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                      </style>
                                                                                                                                                                                                                                                                                                                                                                      </head>
                                                                                                                                                                                                                                                                                                                                                                      <body>
                                                                                                                                                                                                                                                                                                                                                                      <span class="example">
                                                                                                                                                                                                                                                                                                                                                                        <span style="color:black">black text with red underline and blue hover</span>
                                                                                                                                                                                                                                                                                                                                                                      </span>
                                                                                                                                                                                                                                                                                                                                                                      </body>
                                                                                                                                                                                                                                                                                                                                                                      </html>

                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                      Basic support ? 6.0 (6.0)
                                                                                                                                                                                                                                                                                                                                                                      (prefixed with -moz-)
                                                                                                                                                                                                                                                                                                                                                                      ? ? ?
                                                                                                                                                                                                                                                                                                                                                                      Feature Android Firefox mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                      Basic support ? 6.0 (6.0)
                                                                                                                                                                                                                                                                                                                                                                      (prefixed with -moz-)
                                                                                                                                                                                                                                                                                                                                                                      ? ? ?

                                                                                                                                                                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                                                                                                                                                                      Tags (3)

                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                      Page last modified 12:42, 24 Aug 2011 by yyss

                                                                                                                                                                                                                                                                                                                                                                      text-decoration - MDN

                                                                                                                                                                                                                                                                                                                                                                        text-decoration

                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                        The text-decoration CSS property is used to set the text formattings underline, overline, line-through and blink.

                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                        text-decoration:   none | [underline || overline || line-through || blink] | inherit

                                                                                                                                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                                                                                                                                        Accepts one or more whitespace separated values:

                                                                                                                                                                                                                                                                                                                                                                        none
                                                                                                                                                                                                                                                                                                                                                                        Produces no text decoration.
                                                                                                                                                                                                                                                                                                                                                                        underline
                                                                                                                                                                                                                                                                                                                                                                        Each line of text is underlined.
                                                                                                                                                                                                                                                                                                                                                                        overline
                                                                                                                                                                                                                                                                                                                                                                        Each line of text has a line above it.
                                                                                                                                                                                                                                                                                                                                                                        line-through
                                                                                                                                                                                                                                                                                                                                                                        Each line of text has a line through the middle.
                                                                                                                                                                                                                                                                                                                                                                        blink
                                                                                                                                                                                                                                                                                                                                                                        Text blinks. Browsers may ignore this value, as Internet Explorer and Safari does. Supported by Firefox (Gecko) and Opera. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG.
                                                                                                                                                                                                                                                                                                                                                                        -moz-anchor-decoration
                                                                                                                                                                                                                                                                                                                                                                        Mozilla CSS Extension, not suitable for web content.

                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                        View Live Examples

                                                                                                                                                                                                                                                                                                                                                                         p { text-decoration: line-through; }
                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                         p { text-decoration: underline overline; }  /* multiple values are allowed */ 

                                                                                                                                                                                                                                                                                                                                                                        Notes

                                                                                                                                                                                                                                                                                                                                                                        Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

                                                                                                                                                                                                                                                                                                                                                                        For example, in the markup:
                                                                                                                                                                                                                                                                                                                                                                         <p>This text has <em>some emphasized words</em> in it.</p>
                                                                                                                                                                                                                                                                                                                                                                        the style rule:
                                                                                                                                                                                                                                                                                                                                                                         p { text-decoration: underline }
                                                                                                                                                                                                                                                                                                                                                                        would cause the entire paragraph to be underlined. However, the style rule:
                                                                                                                                                                                                                                                                                                                                                                         em { text-decoration: none }
                                                                                                                                                                                                                                                                                                                                                                        would not cause any change; the entire paragraph would still be underlined.
                                                                                                                                                                                                                                                                                                                                                                        (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

                                                                                                                                                                                                                                                                                                                                                                        Gecko 6.0 note
                                                                                                                                                                                                                                                                                                                                                                        (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)

                                                                                                                                                                                                                                                                                                                                                                        Starting with Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) , the text-decoration property resets -moz-text-blink, -moz-text-decoration-color, -moz-text-decoration-line and -moz-text-decoration-style, if specified.

                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                                                                                        Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                        Basic support 1.0 (1.7 or earlier) 1.0 3.0 3.5 1.0
                                                                                                                                                                                                                                                                                                                                                                        blink value 1.0 (1.7 or earlier) -- -- 4.0 --
                                                                                                                                                                                                                                                                                                                                                                        Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                        Basic support ? ? ? ? ?
                                                                                                                                                                                                                                                                                                                                                                        blink value ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                                                                        Tags (2)

                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                        Page last modified 10:58, 24 Apr 2011 by Elchi3

                                                                                                                                                                                                                                                                                                                                                                        text-decoration-line - MDN

                                                                                                                                                                                                                                                                                                                                                                          text-decoration-line

                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                          The text-decoration-line CSS property sets what kind of line decorations are added to an element.

                                                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                                                          text-decoration-line: none | underline || overline || line-through
                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                                                                                                                                          Accepts one or more whitespace separated values:

                                                                                                                                                                                                                                                                                                                                                                          none
                                                                                                                                                                                                                                                                                                                                                                          Produces no text decoration.
                                                                                                                                                                                                                                                                                                                                                                          underline
                                                                                                                                                                                                                                                                                                                                                                          Each line of text is underlined.
                                                                                                                                                                                                                                                                                                                                                                          overline
                                                                                                                                                                                                                                                                                                                                                                          Each line of text has a line above it.
                                                                                                                                                                                                                                                                                                                                                                          line-through
                                                                                                                                                                                                                                                                                                                                                                          Each line of text has a line through the middle.
                                                                                                                                                                                                                                                                                                                                                                          -moz-anchor-decoration
                                                                                                                                                                                                                                                                                                                                                                          Mozilla CSS Extension, not suitable for web content.

                                                                                                                                                                                                                                                                                                                                                                          Notes

                                                                                                                                                                                                                                                                                                                                                                          In contrast to text-decoration, the -moz-text-decoration-line property does not accept the blink value. You might use -moz-text-blink instead.

                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                          .example { 
                                                                                                                                                                                                                                                                                                                                                                              text-decoration-line: underline;
                                                                                                                                                                                                                                                                                                                                                                              text-decoration-style: wavy;
                                                                                                                                                                                                                                                                                                                                                                              text-decoration-color: red;
                                                                                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                                          Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                          Basic support 6.0 (6.0)
                                                                                                                                                                                                                                                                                                                                                                          (prefixed with -moz-)
                                                                                                                                                                                                                                                                                                                                                                          ? ? ? ?
                                                                                                                                                                                                                                                                                                                                                                          Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                          Page last modified 12:42, 24 Aug 2011 by yyss

                                                                                                                                                                                                                                                                                                                                                                          text-decoration-style - MDN

                                                                                                                                                                                                                                                                                                                                                                            text-decoration-style

                                                                                                                                                                                                                                                                                                                                                                            This is an experimental feature
                                                                                                                                                                                                                                                                                                                                                                            Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                            The text-decoration-style CSS property defines the style of the lines specified by text-decoration-line. The style applies to all lines, there is no way to define different style for each of the line defined by text-decoration-line.

                                                                                                                                                                                                                                                                                                                                                                            If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like <del> or <s>. As browsers can disabled styling in some cases, the semantic meaning won't disappear in such a situation.

                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                            text-decoration-style: 	inherit     or
                                                                                                                                                                                                                                                                                                                                                                            text-decoration-style:  style
                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                            where :

                                                                                                                                                                                                                                                                                                                                                                            inherit
                                                                                                                                                                                                                                                                                                                                                                            Is a keyword indicating to reuse the value calculated on the parent element.
                                                                                                                                                                                                                                                                                                                                                                            style
                                                                                                                                                                                                                                                                                                                                                                            Is one of the following keywords :
                                                                                                                                                                                                                                                                                                                                                                            Keyword Description Live example Comment
                                                                                                                                                                                                                                                                                                                                                                            solid Draws a single line Lorem ipsum  
                                                                                                                                                                                                                                                                                                                                                                            double Draws a double line Lorem ipsum  
                                                                                                                                                                                                                                                                                                                                                                            dotted Draws a dotted line Lorem ipsum  
                                                                                                                                                                                                                                                                                                                                                                            dashed Draws a dashed line Lorem ipsum  
                                                                                                                                                                                                                                                                                                                                                                            wavy Draws a wavy line Lorem ipsum  
                                                                                                                                                                                                                                                                                                                                                                            -moz-noneNon-standard Do not draw a line Lorem ipsum Do not use : use text-decoration-line: none instead

                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                            .example { 
                                                                                                                                                                                                                                                                                                                                                                                text-decoration-line: underline;
                                                                                                                                                                                                                                                                                                                                                                                text-decoration-style: wavy;
                                                                                                                                                                                                                                                                                                                                                                                text-decoration-color: red;
                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                            This is how it looks.

                                                                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                                                                            Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                            CSS Text Level 3 Working Draft  

                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                                                                            Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                            Basic support 6.0 (6.0)
                                                                                                                                                                                                                                                                                                                                                                            -moz
                                                                                                                                                                                                                                                                                                                                                                            -- -- -- --
                                                                                                                                                                                                                                                                                                                                                                            Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                            Basic support

                                                                                                                                                                                                                                                                                                                                                                            6.0 (6.0)
                                                                                                                                                                                                                                                                                                                                                                            -moz

                                                                                                                                                                                                                                                                                                                                                                            -- -- -- --

                                                                                                                                                                                                                                                                                                                                                                            Tags (4)

                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                            Page last modified 09:23, 27 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                            text-indent - MDN

                                                                                                                                                                                                                                                                                                                                                                              text-indent

                                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                              The text-indent CSS property specifies how much horizontal space should be left before beginning of the first line of the text content of an element. Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's box.

                                                                                                                                                                                                                                                                                                                                                                              • Initial value : 0
                                                                                                                                                                                                                                                                                                                                                                              • Applies to: block and inline-block elements, table cells
                                                                                                                                                                                                                                                                                                                                                                              • Inherited : yes
                                                                                                                                                                                                                                                                                                                                                                              • Percentages: refer to width of containing block
                                                                                                                                                                                                                                                                                                                                                                              • Media: visual
                                                                                                                                                                                                                                                                                                                                                                              • Computed value : the percentage as specified or the absolute length

                                                                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                                                                              text-indent:  <length> | <percentage>
                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                              Values

                                                                                                                                                                                                                                                                                                                                                                              <length>
                                                                                                                                                                                                                                                                                                                                                                              Indentation is specified as fixed <length>. Negative Values are allowed. See <length> values for possible units.
                                                                                                                                                                                                                                                                                                                                                                              <percentage>
                                                                                                                                                                                                                                                                                                                                                                              Indentation is a <percentage> of the containing block width.

                                                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                                                              p { text-indent: 2em } 
                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                              Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                              Internet Explorer 3.0
                                                                                                                                                                                                                                                                                                                                                                              Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                              Opera 3.5
                                                                                                                                                                                                                                                                                                                                                                              Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                                                                              Tags (2)

                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                              Page last modified 22:00, 27 Jul 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                              text-overflow - MDN

                                                                                                                                                                                                                                                                                                                                                                                text-overflow

                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('', U+2026 Horizontal Ellipsis) or a Web author-defined string.

                                                                                                                                                                                                                                                                                                                                                                                text-overflow.png

                                                                                                                                                                                                                                                                                                                                                                                This CSS property doesn't force an overflow to occur, to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden.

                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                text-overflow: inherit                                 or
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: end-overflow-type                       or
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: left-overflow-type right-overflow-type
                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                where :

                                                                                                                                                                                                                                                                                                                                                                                inherit
                                                                                                                                                                                                                                                                                                                                                                                Is a keyword indicating to use the value of this CSS property that the parent element of the element uses.
                                                                                                                                                                                                                                                                                                                                                                                end-overflow-type
                                                                                                                                                                                                                                                                                                                                                                                Is an <overflow-type> CSS value describing the overflow to perform at the end of the line. The end of the line is its right end if the text is written with left-to-right directionality, it is its left end if the text is written with right-to-left directionality.
                                                                                                                                                                                                                                                                                                                                                                                left-overflow-type
                                                                                                                                                                                                                                                                                                                                                                                Is an <overflow-type> CSS value describing the overflow to perform at the left end of the line. The directionality of the text has no influence on which end of the line is affected.
                                                                                                                                                                                                                                                                                                                                                                                right-overflow-type
                                                                                                                                                                                                                                                                                                                                                                                Is an <overflow-type> CSS value describing the overflow to perform at the right end of the line. The directionality of the text has no influence on which end of the line is affected.

                                                                                                                                                                                                                                                                                                                                                                                <overflow-type>

                                                                                                                                                                                                                                                                                                                                                                                The <overflow-type> CSS type describes how text overflow, when not visible, must be handled. The following values are valid:

                                                                                                                                                                                                                                                                                                                                                                                clip
                                                                                                                                                                                                                                                                                                                                                                                This keyword value indicates to truncate the text at the limit of the content area. This is the default value.
                                                                                                                                                                                                                                                                                                                                                                                ellipsis
                                                                                                                                                                                                                                                                                                                                                                                This keyword value indicates to display ellipses ('', U+2026 Horizontal Ellipsis) to represent clipped text. The ellipsis is displayed inside the content area, shortening more the size of the displayed text. If there is not enough place to display ellipsis, they are clipped.
                                                                                                                                                                                                                                                                                                                                                                                string
                                                                                                                                                                                                                                                                                                                                                                                The <string> to be used to represent clipped text. The string is displayed inside the content area, shortening more the size of the displayed text. If there is not enough place to display string, they are clipped.

                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                p {
                                                                                                                                                                                                                                                                                                                                                                                  white-space: nowrap;
                                                                                                                                                                                                                                                                                                                                                                                  width: 100%;                   
                                                                                                                                                                                                                                                                                                                                                                                  overflow: hidden;              /* "overflow" value must be different from "visible" */ 
                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                  text-overflow:    ellipsis;
                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                CSS value direction: ltr direction: rtl
                                                                                                                                                                                                                                                                                                                                                                                Expected Result Live result Expected Result Live result
                                                                                                                                                                                                                                                                                                                                                                                visible overflow 1234567890
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                0987654321
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: clip 123456
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                654321
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ellipsis 1234…
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                …4321
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: '.' 12345.
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                .54321
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: clip clip 123456
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                654321
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: clip ellipsis 12345…
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                6543…
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: clip '.' 12345.
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                6543.
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ellipsis clip …3456
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                …54321
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ellipsis ellipsis …345…
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                …543…
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ellipsis '.' …345.
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                …543.
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ',' clip ,3456
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                ,54321
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ',' ellipsis ,345…
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                ,543…
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ',' '.' ,345.
                                                                                                                                                                                                                                                                                                                                                                                1234567890
                                                                                                                                                                                                                                                                                                                                                                                ,543.
                                                                                                                                                                                                                                                                                                                                                                                1234567890

                                                                                                                                                                                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                                                                                                                                                                                Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                CSS Basic User Interface Level 3 Working Draft  

                                                                                                                                                                                                                                                                                                                                                                                A previous version of this interface reached the Candidate Recommendation status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the Working Draft level, explaining why browsers implemented this property unprefixed, though not at the CR state.

                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                Basic support 1.0 (312.3) 7.0 (7.0) 6.0 [*] 11 [**] 1.3 (312.3)
                                                                                                                                                                                                                                                                                                                                                                                Two-value syntax -- 9.0 (9.0) -- -- --
                                                                                                                                                                                                                                                                                                                                                                                String value -- 9.0 (9.0) -- -- --
                                                                                                                                                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                Basic support (Supported) 7.0 (7.0) ? (Supported) (Supported)
                                                                                                                                                                                                                                                                                                                                                                                Two-value syntax -- 9.0 (9.0) -- -- --
                                                                                                                                                                                                                                                                                                                                                                                String value -- 9.0 (9.0) -- -- --

                                                                                                                                                                                                                                                                                                                                                                                [*] IE8 introduced the prefixed version, -ms-text-overflow, synonymous with text-overflow.

                                                                                                                                                                                                                                                                                                                                                                                [**] Opera supported the prefixed version, -o-text-overflow, from version 9.0 on.

                                                                                                                                                                                                                                                                                                                                                                                Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                Attachments (1)

                                                                                                                                                                                                                                                                                                                                                                                FileSizeDateAttached by 
                                                                                                                                                                                                                                                                                                                                                                                text-overflow.png
                                                                                                                                                                                                                                                                                                                                                                                Different ways of handling text overflow
                                                                                                                                                                                                                                                                                                                                                                                17.89 kB08:16, 25 Oct 2011teoliActions

                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                Page last modified 16:23, 25 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                text-rendering - MDN

                                                                                                                                                                                                                                                                                                                                                                                  text-rendering

                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                  Provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows and Linux. 

                                                                                                                                                                                                                                                                                                                                                                                  Note: This property has no effect on Mac OS X.

                                                                                                                                                                                                                                                                                                                                                                                  One very visible effect is: optimizeLegibility enables ligatures (ff, fi, fl etc.) in text smaller than 20px for some fonts (for example, Microsoft's Calibri, Candara, Constantia and Corbel or the DejaVu font family).

                                                                                                                                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                                                                                                                                  text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

                                                                                                                                                                                                                                                                                                                                                                                  Values

                                                                                                                                                                                                                                                                                                                                                                                  auto
                                                                                                                                                                                                                                                                                                                                                                                  The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.
                                                                                                                                                                                                                                                                                                                                                                                  optimizeSpeed
                                                                                                                                                                                                                                                                                                                                                                                  The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
                                                                                                                                                                                                                                                                                                                                                                                  optimizeLegibility
                                                                                                                                                                                                                                                                                                                                                                                  The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
                                                                                                                                                                                                                                                                                                                                                                                  geometricPrecision

                                                                                                                                                                                                                                                                                                                                                                                  The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good.

                                                                                                                                                                                                                                                                                                                                                                                  In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

                                                                                                                                                                                                                                                                                                                                                                                  But the geometricPrecision property—when fully supported by the rendering engine—lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

                                                                                                                                                                                                                                                                                                                                                                                  WebKit precisely applies the specified value, but Gecko treats the value the same as optimizeLegibility.

                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                  /* make sure all fonts in the HTML document display in all its glory,
                                                                                                                                                                                                                                                                                                                                                                                     but avoid inadequate ligatures in class foo elements */
                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                  body  { text-rendering: optimizeLegibility; }
                                                                                                                                                                                                                                                                                                                                                                                  .foo  { text-rendering: optimizeSpeed; }

                                                                                                                                                                                                                                                                                                                                                                                  Live Example

                                                                                                                                                                                                                                                                                                                                                                                  CSS code Kerning Ligatures
                                                                                                                                                                                                                                                                                                                                                                                  font: 19.9px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
                                                                                                                                                                                                                                                                                                                                                                                  font: 20px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
                                                                                                                                                                                                                                                                                                                                                                                  font: 3em 'DejaVu Serif',Constantia;
                                                                                                                                                                                                                                                                                                                                                                                  text-rendering: optimizeSpeed;
                                                                                                                                                                                                                                                                                                                                                                                  LYoWAT ff fi fl ffl
                                                                                                                                                                                                                                                                                                                                                                                  font: 3em 'Dejavu Serif',Constantia;
                                                                                                                                                                                                                                                                                                                                                                                  text-rendering: optimizeLegibility;
                                                                                                                                                                                                                                                                                                                                                                                  LYoWAT ff fi fl ffl

                                                                                                                                                                                                                                                                                                                                                                                  Gecko Notes

                                                                                                                                                                                                                                                                                                                                                                                  The 20px threshold value of the auto keyword can be changed by changing the browser.display.auto_quality_min_font_size preference.

                                                                                                                                                                                                                                                                                                                                                                                  The optimizeSpeed option has no effect on Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) , because the standard code for text rendering is already very fast and there is not a faster code path at this time. See bug 595688 for details.

                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                  Basic support for Windows and Linux

                                                                                                                                                                                                                                                                                                                                                                                  4.0 

                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                  3.0 (1.9) -- -- 5.0 (532.5)
                                                                                                                                                                                                                                                                                                                                                                                  Basic support for other operating systems -- -- -- -- --
                                                                                                                                                                                                                                                                                                                                                                                  auto

                                                                                                                                                                                                                                                                                                                                                                                  Chrome treats this as optimizeSpeed

                                                                                                                                                                                                                                                                                                                                                                                  Work is continuing on WebKit bug 41363

                                                                                                                                                                                                                                                                                                                                                                                  If the font size is 20 px or higher, Gecko browsers use optimizeLegibility; for smaller text, they use optimizeSpeed. -- -- Safari treats this as optimizeSpeed.

                                                                                                                                                                                                                                                                                                                                                                                  Work is continuing on WebKit bug 41363

                                                                                                                                                                                                                                                                                                                                                                                  geometricPrecision

                                                                                                                                                                                                                                                                                                                                                                                  13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.

                                                                                                                                                                                                                                                                                                                                                                                  Introduced in WebKit 535.1   WebKit bug 60317

                                                                                                                                                                                                                                                                                                                                                                                  Gecko treats the value the same as optimizeLegibility.  --  --  
                                                                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                  Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                                                                                  This is an SVG property, it is not defined in any CSS standard. Gecko (Firefox) and WebKit apply text-rendering also to HTML and XML content.

                                                                                                                                                                                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 13:45, 8 Jun 2011 by grendel

                                                                                                                                                                                                                                                                                                                                                                                  text-shadow - MDN

                                                                                                                                                                                                                                                                                                                                                                                    text-shadow

                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                    Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                    (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                    The text-shadow CSS property accepts a comma-separated list of shadow effects to be applied to the text and text-decorations of the element.

                                                                                                                                                                                                                                                                                                                                                                                    Multiple shadow effects are applied front-to-back: the first shadow is on top.

                                                                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                                                                    text-shadow: none | [<shadow>,]* <shadow>
                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                      where <shadow> is:
                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                    [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                                                                                                                                                    <color>
                                                                                                                                                                                                                                                                                                                                                                                    Optional, allowed before or after the <length> values. If the <color> is not specified, a UA-chosen color will be used. Gecko/Firefox uses the value of the element's color property. Other browsers may differ.
                                                                                                                                                                                                                                                                                                                                                                                    Note: Specify a color for browser interoperability.
                                                                                                                                                                                                                                                                                                                                                                                    <offset-x> <offset-y>
                                                                                                                                                                                                                                                                                                                                                                                    Required. These <length> values set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the text. <offset-y> specifies the vertical distance. Negative values place the shadow above the text. If both values are 0, the shadow is placed behind the text (and may generate a blur effect when <blur-radius> is set).
                                                                                                                                                                                                                                                                                                                                                                                    See <length> for possible units.
                                                                                                                                                                                                                                                                                                                                                                                    <blur-radius>
                                                                                                                                                                                                                                                                                                                                                                                    Optional. This is a <length> value. If not specified, it will be 0. The higher this value, the bigger the blur, so the shadow becomes wider and lighter.

                                                                                                                                                                                                                                                                                                                                                                                    Gecko 2 note
                                                                                                                                                                                                                                                                                                                                                                                    (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                    Starting in Gecko 2, the blur radius is capped at 300 for performance reasons. Also, let's face it, blur radii that big are just crazy.

                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                    text-shadow: orange 0 -2px;
                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

                                                                                                                                                                                                                                                                                                                                                                                    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
                                                                                                                                                                                                                                                                                                                                                                                    color: white;
                                                                                                                                                                                                                                                                                                                                                                                    font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

                                                                                                                                                                                                                                                                                                                                                                                    text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
                                                                                                                                                                                                                                                                                                                                                                                                 rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
                                                                                                                                                                                                                                                                                                                                                                                                 rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
                                                                                                                                                                                                                                                                                                                                                                                    color: gold;
                                                                                                                                                                                                                                                                                                                                                                                    background: gold;
                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                    Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                    Internet Explorer 10 [1]
                                                                                                                                                                                                                                                                                                                                                                                    5.5  supports Microsoft's Shadow and DropShadow Filter
                                                                                                                                                                                                                                                                                                                                                                                    Firefox (Gecko) 3.5 (1.9.1)
                                                                                                                                                                                                                                                                                                                                                                                    Opera 9.5
                                                                                                                                                                                                                                                                                                                                                                                    Safari (WebKit) 1.1 (100), multiple text-shadows since 4.0 (528)
                                                                                                                                                                                                                                                                                                                                                                                    Konqueror 3.4
                                                                                                                                                                                                                                                                                                                                                                                    Chromium 2.0.158.0
                                                                                                                                                                                                                                                                                                                                                                                    • Gecko (Firefox) theoretically supports infinite text-shadows (don't try it).
                                                                                                                                                                                                                                                                                                                                                                                    • Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
                                                                                                                                                                                                                                                                                                                                                                                      Opera 9.5-10.1 adheres to the old, reverse painting order (CSS2, the first specified shadow is on the bottom).
                                                                                                                                                                                                                                                                                                                                                                                    • Safari: Any shadows that do not explicitly specify a color are transparent.
                                                                                                                                                                                                                                                                                                                                                                                      Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest).

                                                                                                                                                                                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                                                                                                                                                                                    text-shadow was improperly defined in CSS2 and dropped in CSS2.1. The CSS3 Text spec improved the syntax.

                                                                                                                                                                                                                                                                                                                                                                                    Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 11:11, 17 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                    text-transform - MDN

                                                                                                                                                                                                                                                                                                                                                                                      text-transform

                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                      The text-transform CSS property specifies capitalization and lowercase effects of an element's text should be rendered.

                                                                                                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                                                                                                      text-transform:  capitalize | uppercase | lowercase | none | 
                                                                                                                                                                                                                                                                                                                                                                                      inherit
                                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                                      Values

                                                                                                                                                                                                                                                                                                                                                                                      capitalize
                                                                                                                                                                                                                                                                                                                                                                                      First letter on each word is uppercase and other letter unaffected.
                                                                                                                                                                                                                                                                                                                                                                                      uppercase
                                                                                                                                                                                                                                                                                                                                                                                      All letters are converted to uppercase.
                                                                                                                                                                                                                                                                                                                                                                                      lowercase
                                                                                                                                                                                                                                                                                                                                                                                      All letters are converted to lowercase.
                                                                                                                                                                                                                                                                                                                                                                                      none
                                                                                                                                                                                                                                                                                                                                                                                      No case change effects.

                                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                                      p:first-line { text-transform: uppercase; }
                                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                                      Live Examples

                                                                                                                                                                                                                                                                                                                                                                                      • none Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                                                                                                                                                                                                                                                                                                                                                                      • capitalize Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                                                                                                                                                                                                                                                                                                                                                                      • uppercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                                                                                                                                                                                                                                                                                                                                                                      • lowercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                      Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                      Internet Explorer 4.0
                                                                                                                                                                                                                                                                                                                                                                                      Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                                      Opera 3.5
                                                                                                                                                                                                                                                                                                                                                                                      Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                                                                                      Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 08:20, 22 Jul 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                                      top - MDN

                                                                                                                                                                                                                                                                                                                                                                                        top

                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                        The top property specifies part of the position of positioned elements.

                                                                                                                                                                                                                                                                                                                                                                                        For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

                                                                                                                                                                                                                                                                                                                                                                                        For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                           top: <length> | <percentage> | auto | inherit
                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                         /* The body could be set using px unit also for the div to operate */
                                                                                                                                                                                                                                                                                                                                                                                         body{
                                                                                                                                                                                                                                                                                                                                                                                           width: 100%;
                                                                                                                                                                                                                                                                                                                                                                                           height: 100%;
                                                                                                                                                                                                                                                                                                                                                                                         }
                                                                                                                                                                                                                                                                                                                                                                                         /* The div can now operate the settings with % unit (body w and h are set) */
                                                                                                                                                                                                                                                                                                                                                                                         div{
                                                                                                                                                                                                                                                                                                                                                                                           position:absolute;
                                                                                                                                                                                                                                                                                                                                                                                           left:15%;
                                                                                                                                                                                                                                                                                                                                                                                           top:30%;
                                                                                                                                                                                                                                                                                                                                                                                           bottom:30%;
                                                                                                                                                                                                                                                                                                                                                                                           width:70%;
                                                                                                                                                                                                                                                                                                                                                                                           height:40%;
                                                                                                                                                                                                                                                                                                                                                                                           text-align:left;
                                                                                                                                                                                                                                                                                                                                                                                           border: 3px rgb(0,0,0) solid;
                                                                                                                                                                                                                                                                                                                                                                                         }
                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                         <?xml version="1.0" encoding="utf-8"?>
                                                                                                                                                                                                                                                                                                                                                                                         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                                                                                                                                                                                                                                                                                                                                                                                   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                                                                                                                                                                                                                                                                                                                                                                         <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
                                                                                                                                                                                                                                                                                                                                                                                           <head>
                                                                                                                                                                                                                                                                                                                                                                                             <meta http-equiv="Content-Type" content="application/xhtml+xml" />
                                                                                                                                                                                                                                                                                                                                                                                             <title>Mozzila.org height top left width percentage CSS</title>
                                                                                                                                                                                                                                                                                                                                                                                             <style type="text/css">
                                                                                                                                                                                                                                                                                                                                                                                               /* The body could be set using px unit also for the div to operate */
                                                                                                                                                                                                                                                                                                                                                                                               body{
                                                                                                                                                                                                                                                                                                                                                                                                 width: 100%;
                                                                                                                                                                                                                                                                                                                                                                                                 height: 100%;
                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                               /* The div can now operate the settings with % unit (body w and h are set) */
                                                                                                                                                                                                                                                                                                                                                                                               div{
                                                                                                                                                                                                                                                                                                                                                                                                 position:absolute;
                                                                                                                                                                                                                                                                                                                                                                                                 left:15%;
                                                                                                                                                                                                                                                                                                                                                                                                 top:30%;
                                                                                                                                                                                                                                                                                                                                                                                                 bottom:30%;
                                                                                                                                                                                                                                                                                                                                                                                                 width:70%;
                                                                                                                                                                                                                                                                                                                                                                                                 height:40%;
                                                                                                                                                                                                                                                                                                                                                                                                 text-align:left;
                                                                                                                                                                                                                                                                                                                                                                                                 border: 3px rgb(0,0,0) solid;
                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                             </style>
                                                                                                                                                                                                                                                                                                                                                                                           </head>
                                                                                                                                                                                                                                                                                                                                                                                           <body>
                                                                                                                                                                                                                                                                                                                                                                                              <center>
                                                                                                                                                                                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                                                                                                                                                                                     ...Some content...
                                                                                                                                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                                                                                                                                              </center>
                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                           </body>
                                                                                                                                                                                                                                                                                                                                                                                         </html>
                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                        Notes

                                                                                                                                                                                                                                                                                                                                                                                        top is the more relevant property than bottom because the browser window default is to valign to the top. With some position property settings the top property is irrelevant. Top and bottom settings can be used by DHTML for more than simply the div element.

                                                                                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                        Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                        Internet Explorer ?
                                                                                                                                                                                                                                                                                                                                                                                        Firefox 1
                                                                                                                                                                                                                                                                                                                                                                                        Netscape ?
                                                                                                                                                                                                                                                                                                                                                                                        Opera ?
                                                                                                                                                                                                                                                                                                                                                                                        Safari ?

                                                                                                                                                                                                                                                                                                                                                                                        See also

                                                                                                                                                                                                                                                                                                                                                                                        position, right, bottom, left

                                                                                                                                                                                                                                                                                                                                                                                        Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 08:56, 10 Nov 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                        transform - MDN

                                                                                                                                                                                                                                                                                                                                                                                          transform

                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                                          The transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed as this text.

                                                                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                                                                          transform:  <transform-function> [<transform-function>]* | none

                                                                                                                                                                                                                                                                                                                                                                                          Vendor prefixes: See the compatibility table below for detail on the vendor prefixes you'll need to use for this feature.

                                                                                                                                                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                                                                                                                                                          transform-function
                                                                                                                                                                                                                                                                                                                                                                                          One or more of the CSS transform functions to be applied, see below.
                                                                                                                                                                                                                                                                                                                                                                                          none
                                                                                                                                                                                                                                                                                                                                                                                          Specifies that no transform should be applied.

                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                          See Using CSS transforms.

                                                                                                                                                                                                                                                                                                                                                                                          Live Example

                                                                                                                                                                                                                                                                                                                                                                                          pre {
                                                                                                                                                                                                                                                                                                                                                                                               width: 33em;
                                                                                                                                                                                                                                                                                                                                                                                               border: solid red;
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                              -moz-transform: translate(100px) rotate(20deg);
                                                                                                                                                                                                                                                                                                                                                                                              -moz-transform-origin: 60% 100%;
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                              -webkit-transform: translate(100px) rotate(20deg);
                                                                                                                                                                                                                                                                                                                                                                                              -webkit-transform-origin: 60% 100%;
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                              -o-transform:translate(100px) rotate(20deg); 
                                                                                                                                                                                                                                                                                                                                                                                              -o-transform-origin:60% 100%;
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                              -ms-transform: translate(100px) rotate(20deg);
                                                                                                                                                                                                                                                                                                                                                                                              -ms-transform-origin: 60% 100%;
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                              transform: translate(100px) rotate(20deg);
                                                                                                                                                                                                                                                                                                                                                                                              transform-origin: 60% 100%;
                                                                                                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                          CSS transform functions

                                                                                                                                                                                                                                                                                                                                                                                          The transform CSS property allows the coordinate system used by an element to be manipulated using transform functions. These functions are described below.

                                                                                                                                                                                                                                                                                                                                                                                          matrix

                                                                                                                                                                                                                                                                                                                                                                                          transform:  matrix(a, c, b, d, tx, ty)
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                          /* Where a, b, c, d build the transformation matrix 
                                                                                                                                                                                                                                                                                                                                                                                             ┌     ┐ 
                                                                                                                                                                                                                                                                                                                                                                                             │ a b │
                                                                                                                                                                                                                                                                                                                                                                                             │ c d │
                                                                                                                                                                                                                                                                                                                                                                                             └     ┘
                                                                                                                                                                                                                                                                                                                                                                                             and tx, ty are the translate values.  */
                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                          Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix [a b c d tx ty].

                                                                                                                                                                                                                                                                                                                                                                                          Note: Gecko (Firefox) accepts a <length> value for tx and ty.
                                                                                                                                                                                                                                                                                                                                                                                          Webkit (Safari, Chrome) and Opera currently support a unitless <number> for tx and ty.

                                                                                                                                                                                                                                                                                                                                                                                          Live Examples

                                                                                                                                                                                                                                                                                                                                                                                           background: gold;  width: 30em;
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                              -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
                                                                                                                                                                                                                                                                                                                                                                                           -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
                                                                                                                                                                                                                                                                                                                                                                                                -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
                                                                                                                                                                                                                                                                                                                                                                                               -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
                                                                                                                                                                                                                                                                                                                                                                                                   transform: matrix(1, -0.2, 0, 1, 0, 0);
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                           background: wheat;
                                                                                                                                                                                                                                                                                                                                                                                           max-width: intrinsic;
                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                              -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
                                                                                                                                                                                                                                                                                                                                                                                           -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
                                                                                                                                                                                                                                                                                                                                                                                                -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
                                                                                                                                                                                                                                                                                                                                                                                               -ms-transform: matrix(1, 0, 0.6, 1,  250, 0);
                                                                                                                                                                                                                                                                                                                                                                                                   transform: matrix(1, 0, 0.6, 1,  250, 0);
                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                          rotate

                                                                                                                                                                                                                                                                                                                                                                                          transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */

                                                                                                                                                                                                                                                                                                                                                                                          Rotates the element clockwise around its origin (as specified by the transform-origin property) by the specified angle. The operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

                                                                                                                                                                                                                                                                                                                                                                                          scale

                                                                                                                                                                                                                                                                                                                                                                                          transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */

                                                                                                                                                                                                                                                                                                                                                                                          Specifies a 2D scaling operation described by [sx, sy]. If sy isn't specified, it is assumed to be equal to sx.

                                                                                                                                                                                                                                                                                                                                                                                          scaleX

                                                                                                                                                                                                                                                                                                                                                                                          transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */

                                                                                                                                                                                                                                                                                                                                                                                          Specifies a scale operation using the vector [sx, 1].

                                                                                                                                                                                                                                                                                                                                                                                          scaleY

                                                                                                                                                                                                                                                                                                                                                                                          transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */

                                                                                                                                                                                                                                                                                                                                                                                          Specifies a scale operation using the vector [1, sy].

                                                                                                                                                                                                                                                                                                                                                                                          skew

                                                                                                                                                                                                                                                                                                                                                                                          transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */

                                                                                                                                                                                                                                                                                                                                                                                          Skews the element around the X and Y axes by the specified angles. If ay isn't provided, no skew is performed on the Y axis.

                                                                                                                                                                                                                                                                                                                                                                                          skewX

                                                                                                                                                                                                                                                                                                                                                                                          transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */

                                                                                                                                                                                                                                                                                                                                                                                          Skews the element around the X axis by the given angle.

                                                                                                                                                                                                                                                                                                                                                                                          skewY

                                                                                                                                                                                                                                                                                                                                                                                          transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */

                                                                                                                                                                                                                                                                                                                                                                                          Skews the element around the Y axis by the given angle.

                                                                                                                                                                                                                                                                                                                                                                                          translate

                                                                                                                                                                                                                                                                                                                                                                                          transform:  translate(tx[, ty])  /* one or two <length> values */

                                                                                                                                                                                                                                                                                                                                                                                          Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.

                                                                                                                                                                                                                                                                                                                                                                                          translateX

                                                                                                                                                                                                                                                                                                                                                                                          transform:  translateX(tx)       /* see <length> for possible values */

                                                                                                                                                                                                                                                                                                                                                                                          Translates the element by the given amount along the X axis.

                                                                                                                                                                                                                                                                                                                                                                                          translateY

                                                                                                                                                                                                                                                                                                                                                                                          transform:  translateY(ty)       /* see <length> for possible values */

                                                                                                                                                                                                                                                                                                                                                                                          Translates the element by the given amount along the Y axis.

                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                                                          Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                          Basic support 3.5 (1.9.1) -moz yes -webkit 9.0 -ms 10.5 -o 3.1 -webkit
                                                                                                                                                                                                                                                                                                                                                                                          3D Support 10.0 -moz 12.0 -webkit 10.0 -ms no 4.0 -webkit
                                                                                                                                                                                                                                                                                                                                                                                          Feature iOS Safari Opera Mini Opera Mobile Android Browser
                                                                                                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                          Notes

                                                                                                                                                                                                                                                                                                                                                                                          Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve the similar effect.

                                                                                                                                                                                                                                                                                                                                                                                          See also

                                                                                                                                                                                                                                                                                                                                                                                          Tags (6)

                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 13:53, 3 Oct 2011 by GreatS

                                                                                                                                                                                                                                                                                                                                                                                          transform-origin - MDN

                                                                                                                                                                                                                                                                                                                                                                                            transform-origin

                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                            The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

                                                                                                                                                                                                                                                                                                                                                                                            • Initial value : 50% 50%
                                                                                                                                                                                                                                                                                                                                                                                            • Applies to: all block level and inline level elements
                                                                                                                                                                                                                                                                                                                                                                                            • Inherited : no
                                                                                                                                                                                                                                                                                                                                                                                            • Percentages: refer to the size of the box itself
                                                                                                                                                                                                                                                                                                                                                                                            • Media: visual
                                                                                                                                                                                                                                                                                                                                                                                            • Computed value : for <length> the absolute value, otherwise a percentage

                                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                                            transform-origin:  [ <percentage> | <length> | left | center | right ]
                                                                                                                                                                                                                                                                                                                                                                                                               [ <percentage> | <length> | top | center | bottom ] ?
                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin:  [ left | center | right ] || [ top | center | bottom ]
                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                                                                                                                                                            Accepts one or two values.

                                                                                                                                                                                                                                                                                                                                                                                            • One single value sets the horizontal position, the vertical position is set to 50%.
                                                                                                                                                                                                                                                                                                                                                                                            • Two values apply first to the horizontal and second to the vertical position.

                                                                                                                                                                                                                                                                                                                                                                                            Combinations are allowed of keyword, <length>, or <percentage> values, but if keywords are mixed with other values, left and right may only be used as the first value, and top and bottom may only be used as the second value. Negative positions are allowed.

                                                                                                                                                                                                                                                                                                                                                                                            <percentage>
                                                                                                                                                                                                                                                                                                                                                                                            With a value pair of 0% 0%, (or just 0 0) the transform-origin is the upper left corner of the box. A value pair of 100% 100% places the transform-origin to the lower right corner. With a value pair of 14% 84%, the point 14% across and 84% down the box is the transform-origin.
                                                                                                                                                                                                                                                                                                                                                                                            <length>
                                                                                                                                                                                                                                                                                                                                                                                            With a value pair of e.g. 2cm 1cm, the transform-origin is placed 2cm to the right and 1cm below the upper left corner of the element.
                                                                                                                                                                                                                                                                                                                                                                                            top left | left top
                                                                                                                                                                                                                                                                                                                                                                                            Same as 0 0
                                                                                                                                                                                                                                                                                                                                                                                            top | top center | center top
                                                                                                                                                                                                                                                                                                                                                                                            Same as 50% 0
                                                                                                                                                                                                                                                                                                                                                                                            right top | top right
                                                                                                                                                                                                                                                                                                                                                                                            Same as 100% 0
                                                                                                                                                                                                                                                                                                                                                                                            left | left center | center left
                                                                                                                                                                                                                                                                                                                                                                                            Same as 0 50%
                                                                                                                                                                                                                                                                                                                                                                                            center | center center
                                                                                                                                                                                                                                                                                                                                                                                            Same as 50% 50% (default value)
                                                                                                                                                                                                                                                                                                                                                                                            right | right center | center right
                                                                                                                                                                                                                                                                                                                                                                                            Same as 100% 50%
                                                                                                                                                                                                                                                                                                                                                                                            bottom left | left bottom
                                                                                                                                                                                                                                                                                                                                                                                            Same as 0 100%
                                                                                                                                                                                                                                                                                                                                                                                            bottom | bottom center | center bottom
                                                                                                                                                                                                                                                                                                                                                                                            Same as 50% 100%
                                                                                                                                                                                                                                                                                                                                                                                            bottom right | right bottom
                                                                                                                                                                                                                                                                                                                                                                                            Same as 100% 100%

                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                            See Using CSS transforms for examples.

                                                                                                                                                                                                                                                                                                                                                                                            Live Examples

                                                                                                                                                                                                                                                                                                                                                                                            transform: none;
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: rotate(30deg);
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: rotate(30deg);
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin: 0 0;
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: rotate(30deg);
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin: 100% 100%;
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: rotate(30deg);
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin: -10em -30em;
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: scale(1.9);
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: scale(1.9);
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin: 0 0;
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: scale(1.9);
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin: 100% -30%;
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: skew(50deg);
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: skew(50deg);
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin: 0 0;
                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                            transform: skew(50deg);
                                                                                                                                                                                                                                                                                                                                                                                            transform-origin: 100% 100%;
                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                                                                                            Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                            Basic support 3.5 (1.9.1) -moz yes -webkit 9.0 -ms 10.5 -o 3.1 -webkit
                                                                                                                                                                                                                                                                                                                                                                                            Feature iOS Safari Opera Mini Opera Mobile Android Browser
                                                                                                                                                                                                                                                                                                                                                                                            Basic support ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                            Notes

                                                                                                                                                                                                                                                                                                                                                                                            Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve the similar effect.

                                                                                                                                                                                                                                                                                                                                                                                            Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 03:20, 19 Aug 2011 by myakura

                                                                                                                                                                                                                                                                                                                                                                                            transform-style - MDN

                                                                                                                                                                                                                                                                                                                                                                                              transform-style

                                                                                                                                                                                                                                                                                                                                                                                              DRAFT
                                                                                                                                                                                                                                                                                                                                                                                              This page is not complete.

                                                                                                                                                                                                                                                                                                                                                                                              This is an experimental feature
                                                                                                                                                                                                                                                                                                                                                                                              Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

                                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                                              The transform-style CSS property determines

                                                                                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                                                                                              transform-style: preserve-3d              or
                                                                                                                                                                                                                                                                                                                                                                                              transform-style: flat
                                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                              where :

                                                                                                                                                                                                                                                                                                                                                                                              preserve-3d
                                                                                                                                                                                                                                                                                                                                                                                              Indicates
                                                                                                                                                                                                                                                                                                                                                                                              flat
                                                                                                                                                                                                                                                                                                                                                                                              Indicates

                                                                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                                                                                                                                                              Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                              CSS 3D Transforms Level 3 Working Draft  

                                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                              Basic support 12 -webkit 10.0 (10) -moz 10 -ms -- (Supported) -webkit
                                                                                                                                                                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                              Basic support 3.0 -webkit 10.0 (10) -moz ? -- (Supported) -webkit

                                                                                                                                                                                                                                                                                                                                                                                              See also

                                                                                                                                                                                                                                                                                                                                                                                              Tags (0)

                                                                                                                                                                                                                                                                                                                                                                                              Edit tags
                                                                                                                                                                                                                                                                                                                                                                                              • No tags

                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 09:51, 2 Nov 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                              transition-delay - MDN

                                                                                                                                                                                                                                                                                                                                                                                                transition-delay

                                                                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference « CSS Reference:Mozilla Extensions

                                                                                                                                                                                                                                                                                                                                                                                                Introduced in Gecko 2

                                                                                                                                                                                                                                                                                                                                                                                                (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                The -moz-transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.

                                                                                                                                                                                                                                                                                                                                                                                                A value of 0s (or 0ms) indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

                                                                                                                                                                                                                                                                                                                                                                                                You may specify multiple delays; each delay will be applied to the corresponding property as specified by the -moz-transition-property property.

                                                                                                                                                                                                                                                                                                                                                                                                Note: This implementation of the CSS transition-delay property is based on a draft specification; the syntax is subject to change.

                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                -moz-transition-delay: <time>[, <time>]*
                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                                                                                                                time
                                                                                                                                                                                                                                                                                                                                                                                                The time (in seconds or milliseconds) to wait between a property's value changing and the start of the animation effect. A time in seconds is represented by a number followed by "s", while a time in milliseconds is a number followed by "ms".

                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                There are several examples of CSS transitions included in the main CSS transitions article.

                                                                                                                                                                                                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                                                                                                                                                                                                Opera ---
                                                                                                                                                                                                                                                                                                                                                                                                Safari (WebKit) nightly, don't know version

                                                                                                                                                                                                                                                                                                                                                                                                Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 12:38, 24 Aug 2011 by yyss

                                                                                                                                                                                                                                                                                                                                                                                                transition-duration - MDN

                                                                                                                                                                                                                                                                                                                                                                                                  transition-duration

                                                                                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference « CSS Reference:Mozilla Extensions

                                                                                                                                                                                                                                                                                                                                                                                                  Introduced in Gecko 2

                                                                                                                                                                                                                                                                                                                                                                                                  (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                  The -moz-transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

                                                                                                                                                                                                                                                                                                                                                                                                  You may specify multiple durations; each duration will be applied to the corresponding property as specified by the -moz-transition-property property.

                                                                                                                                                                                                                                                                                                                                                                                                  Note: This implementation of the CSS transition-duration property is based on a draft specification; the syntax is subject to change.

                                                                                                                                                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                                                                                                                                                  -moz-transition-duration: <time>[, <time>]*
                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                  Values

                                                                                                                                                                                                                                                                                                                                                                                                  time
                                                                                                                                                                                                                                                                                                                                                                                                  The time (in seconds or milliseconds) the transition from the old value of a property to the new value should take. A time in seconds is represented by a number followed by "s", while a time in milliseconds is a number followed by "ms".

                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                  There are several examples of CSS transitions included in the main CSS transitions article.

                                                                                                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                  Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                  Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                  Firefox (Gecko) 4.0? (2.0)
                                                                                                                                                                                                                                                                                                                                                                                                  Opera ---
                                                                                                                                                                                                                                                                                                                                                                                                  Safari (WebKit) nightly, don't know version

                                                                                                                                                                                                                                                                                                                                                                                                  Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 12:37, 24 Aug 2011 by yyss

                                                                                                                                                                                                                                                                                                                                                                                                  transition - MDN

                                                                                                                                                                                                                                                                                                                                                                                                    transition

                                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                    Introduced in Gecko 2

                                                                                                                                                                                                                                                                                                                                                                                                    (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                    The -moz-transition CSS property is a shorthand property for -moz-transition-property, -moz-transition-duration, -moz-transition-timing-function, and -moz-transition-delay.

                                                                                                                                                                                                                                                                                                                                                                                                    Note: This implementation of the CSS transition-duration property is based on a draft specification; the syntax is subject to change.
                                                                                                                                                                                                                                                                                                                                                                                                    • Initial value : -moz-transition is a shorthand property, so it does not technically have an initial value, but the properties for which it is shorthand have the following initial values:
                                                                                                                                                                                                                                                                                                                                                                                                      • -moz-transition-property: all;
                                                                                                                                                                                                                                                                                                                                                                                                      • -moz-transition-duration: 0s;
                                                                                                                                                                                                                                                                                                                                                                                                      • -moz-transition-timing-function: ease;
                                                                                                                                                                                                                                                                                                                                                                                                      • -moz-transition-delay: 0s;
                                                                                                                                                                                                                                                                                                                                                                                                    • Applies to: all elements, :before and :after pseudo elements
                                                                                                                                                                                                                                                                                                                                                                                                    • Inherited :no
                                                                                                                                                                                                                                                                                                                                                                                                    • Media: interactive
                                                                                                                                                                                                                                                                                                                                                                                                    • Computed value : as specified

                                                                                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                                                                                    -moz-transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]
                                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                                    See When property value lists are of different lengths for details on how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                    There are several more examples of CSS transitions included in the main CSS transitions article.

                                                                                                                                                                                                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                    Basic support 1.0 (-webkit-) 4.0 (2.0) (-moz-) - 10.5 3.0 (-webkit-)
                                                                                                                                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                    Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                    Tags (6)

                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 12:38, 24 Aug 2011 by yyss

                                                                                                                                                                                                                                                                                                                                                                                                    transition-property - MDN

                                                                                                                                                                                                                                                                                                                                                                                                      transition-property

                                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                      Introduced in Gecko 2

                                                                                                                                                                                                                                                                                                                                                                                                      (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                      The -moz-transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.

                                                                                                                                                                                                                                                                                                                                                                                                      Note: The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don't currently animate, because someday they might, causing unexpected results.

                                                                                                                                                                                                                                                                                                                                                                                                      If you specify a shorthand property (for example, background, all of its longhand sub-properties that can be animated will be.

                                                                                                                                                                                                                                                                                                                                                                                                      Note: This implementation of the CSS transition-property property is based on a draft specification; the syntax is subject to change.

                                                                                                                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                                                                                                                      -moz-transition-property: none | all | [<property-name>][, <property-name>]*
                                                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                                                      Values

                                                                                                                                                                                                                                                                                                                                                                                                      none
                                                                                                                                                                                                                                                                                                                                                                                                      No properties will transition.
                                                                                                                                                                                                                                                                                                                                                                                                      all
                                                                                                                                                                                                                                                                                                                                                                                                      All properties that can have an animated transition will do so.
                                                                                                                                                                                                                                                                                                                                                                                                      property-name
                                                                                                                                                                                                                                                                                                                                                                                                      A property to which a transition effect should be applied when its value changes.

                                                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                                                      There are several examples of CSS transitions included in the main CSS transitions article.

                                                                                                                                                                                                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                      Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                      Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                      Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                                                                                                                                                                                                      Opera ---
                                                                                                                                                                                                                                                                                                                                                                                                      Safari (WebKit) nightly, don't know version

                                                                                                                                                                                                                                                                                                                                                                                                      Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 12:36, 24 Aug 2011 by yyss

                                                                                                                                                                                                                                                                                                                                                                                                      transition-timing-function - MDN

                                                                                                                                                                                                                                                                                                                                                                                                        transition-timing-function

                                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                        The transition-timing-function CSS property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.

                                                                                                                                                                                                                                                                                                                                                                                                        This acceleration curve is defined using one <timing-function> for each property to be transitioned. 

                                                                                                                                                                                                                                                                                                                                                                                                        Note: This implementation of the CSS transition-timing-function is based on a draft specification and is therefore experimental : the syntax is subject to change.

                                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                                        -moz-transition-timing-function: <timing-function> [, <timing-function>]*
                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                        where:

                                                                                                                                                                                                                                                                                                                                                                                                        Each <timing-function> represents the timing function to link to the corresponding property to transition, as defined in transition-property.

                                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                                        There are several examples of CSS transitions included in the main CSS transitions article.

                                                                                                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                        Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                        Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                        Firefox (Gecko) 4.0 (2.0) -moz
                                                                                                                                                                                                                                                                                                                                                                                                        Opera ---
                                                                                                                                                                                                                                                                                                                                                                                                        Safari (WebKit) 3.1 -webkit

                                                                                                                                                                                                                                                                                                                                                                                                        Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 13:24, 10 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                        unicode-bidi - MDN

                                                                                                                                                                                                                                                                                                                                                                                                          unicode-bidi

                                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                          The unicode-bidi property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.

                                                                                                                                                                                                                                                                                                                                                                                                          Note: This property is intended for DTD designers. Web designers and similar authors should not override it.

                                                                                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                                                                                          unicode-bidi: [ normal | embed | [ isolate || bidi-override ] | plaintext | inherit ] ;
                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                                                                                                                                                                          normal 
                                                                                                                                                                                                                                                                                                                                                                                                          The element does not offer a additional level of embedding with respect to the bidirectional algorithm. For inline elements implicit reordering works across element boundaries.
                                                                                                                                                                                                                                                                                                                                                                                                          embed
                                                                                                                                                                                                                                                                                                                                                                                                          If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the direction property.
                                                                                                                                                                                                                                                                                                                                                                                                          bidi-override 
                                                                                                                                                                                                                                                                                                                                                                                                          For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored.
                                                                                                                                                                                                                                                                                                                                                                                                          isolate
                                                                                                                                                                                                                                                                                                                                                                                                          This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore isolated from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several U+FFFC Object Replacement Character, i.e. like an image. This keyword can be combined with bidi-override.
                                                                                                                                                                                                                                                                                                                                                                                                          plaintext
                                                                                                                                                                                                                                                                                                                                                                                                          This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the direction property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.
                                                                                                                                                                                                                                                                                                                                                                                                          This value allows to display data which has already formatted using a tool following the Unicode Bidirectional Algorithm.

                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                          .bible-quote {
                                                                                                                                                                                                                                                                                                                                                                                                            direction: rtl;   unicode-bidi: embed;
                                                                                                                                                                                                                                                                                                                                                                                                          } 
                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                          Specification

                                                                                                                                                                                                                                                                                                                                                                                                          Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                          CSS Writing Modes Level 3 Working Draft Added plaintext and isolate keywords
                                                                                                                                                                                                                                                                                                                                                                                                          CSS 2 Level 1 Recommendation  

                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                          Basic support 2.0 1.0 (1.7 or earlier) 5.5 9.2 1.3
                                                                                                                                                                                                                                                                                                                                                                                                          isolate 16 10.0 (10) [1] -- -- --
                                                                                                                                                                                                                                                                                                                                                                                                          plaintext -- 10.0 (10) [2] -- -- --
                                                                                                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                          Basic support 1.0 1.0 (1.0) 6 8 3.1
                                                                                                                                                                                                                                                                                                                                                                                                          isolate -- 10.0 (10) [3] -- -- --
                                                                                                                                                                                                                                                                                                                                                                                                          plaintext -- 10.0 (10) [4] -- -- --

                                                                                                                                                                                                                                                                                                                                                                                                          See also

                                                                                                                                                                                                                                                                                                                                                                                                          direction

                                                                                                                                                                                                                                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 14:26, 24 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                          :valid - MDN

                                                                                                                                                                                                                                                                                                                                                                                                            :valid

                                                                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                            The :valid CSS pseudo-class represents any <input> element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                            See :invalid for an example.

                                                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                            Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                                            Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                            Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                                                                                                                                                                                                            Opera 9.5

                                                                                                                                                                                                                                                                                                                                                                                                            Safari | Chrome | WebKit

                                                                                                                                                                                                                                                                                                                                                                                                            5 | 8 | 534.10

                                                                                                                                                                                                                                                                                                                                                                                                            Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 12:55, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                            vertical-align - MDN

                                                                                                                                                                                                                                                                                                                                                                                                              vertical-align

                                                                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                                                              The vertical-align property specifies the vertical alignment of an inline or table-cell element.

                                                                                                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                                                                                                              vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> | inherit

                                                                                                                                                                                                                                                                                                                                                                                                              Values (for inline elements)

                                                                                                                                                                                                                                                                                                                                                                                                              Most of the values vertically align the element relative to its parent element:

                                                                                                                                                                                                                                                                                                                                                                                                              baseline 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the baseline of the element with the baseline of its parent.
                                                                                                                                                                                                                                                                                                                                                                                                              sub 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the baseline of the element with the subscript-baseline of its parent.
                                                                                                                                                                                                                                                                                                                                                                                                              super 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the baseline of the element with the superscript-baseline of its parent.
                                                                                                                                                                                                                                                                                                                                                                                                              text-top 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the top of the element with the top of the parent element's font.
                                                                                                                                                                                                                                                                                                                                                                                                              text-bottom 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the bottom of the element with the bottom of the parent element's font.
                                                                                                                                                                                                                                                                                                                                                                                                              middle 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the middle of the element with the middle of lowercase letters in the parent.
                                                                                                                                                                                                                                                                                                                                                                                                              <length> 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the baseline of the element at the given length above the baseline of its parent.
                                                                                                                                                                                                                                                                                                                                                                                                              <percentage> 
                                                                                                                                                                                                                                                                                                                                                                                                              like <length> values, with the percentage being a percent of the line-height property

                                                                                                                                                                                                                                                                                                                                                                                                              For elements that do not have a baseline, the bottom margin edge is used instead.

                                                                                                                                                                                                                                                                                                                                                                                                              However, two values vertically align the element relative to the entire line rather than relative to its parent:

                                                                                                                                                                                                                                                                                                                                                                                                              top 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the top of the element and its descendants with the top of the entire line.
                                                                                                                                                                                                                                                                                                                                                                                                              bottom 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the bottom of the element and its descendants with the bottom of the entire line.

                                                                                                                                                                                                                                                                                                                                                                                                              Negative values are allowed.

                                                                                                                                                                                                                                                                                                                                                                                                              Values (for table cells)

                                                                                                                                                                                                                                                                                                                                                                                                              baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>) 
                                                                                                                                                                                                                                                                                                                                                                                                              Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
                                                                                                                                                                                                                                                                                                                                                                                                              top
                                                                                                                                                                                                                                                                                                                                                                                                              Align the top padding edge of the cell with the top of the row.
                                                                                                                                                                                                                                                                                                                                                                                                              middle
                                                                                                                                                                                                                                                                                                                                                                                                              Center the padding box of the cell within the row.
                                                                                                                                                                                                                                                                                                                                                                                                              bottom
                                                                                                                                                                                                                                                                                                                                                                                                              Align the bottom padding edge of the cell with the bottom of the row.

                                                                                                                                                                                                                                                                                                                                                                                                              Negative values are allowed.

                                                                                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                                                                                              img {
                                                                                                                                                                                                                                                                                                                                                                                                              	vertical-align: bottom;
                                                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                                              Notes

                                                                                                                                                                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                              Browser lowest version
                                                                                                                                                                                                                                                                                                                                                                                                              Internet Explorer 4.0
                                                                                                                                                                                                                                                                                                                                                                                                              Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                                                              Opera 4.0
                                                                                                                                                                                                                                                                                                                                                                                                              Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                                                                                                              See also

                                                                                                                                                                                                                                                                                                                                                                                                              line-height, text-align, margin (auto)

                                                                                                                                                                                                                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 12:59, 29 Apr 2010 by Elchi3

                                                                                                                                                                                                                                                                                                                                                                                                              visibility - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                visibility

                                                                                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                The visibility CSS property is used for two things:

                                                                                                                                                                                                                                                                                                                                                                                                                1. The hidden value hides an element but leaves space where it would have been.
                                                                                                                                                                                                                                                                                                                                                                                                                2. The collapse value hides rows or columns of a table. It also collapses XUL elements.

                                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                visibility:  visible | hidden | collapse | 
                                                                                                                                                                                                                                                                                                                                                                                                                inherit
                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                                                                                                                                visible
                                                                                                                                                                                                                                                                                                                                                                                                                Default value, the box is visible.
                                                                                                                                                                                                                                                                                                                                                                                                                hidden
                                                                                                                                                                                                                                                                                                                                                                                                                The box is invisible (fully transparent, nothing is drawn), but still affects layout.  Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
                                                                                                                                                                                                                                                                                                                                                                                                                collapse
                                                                                                                                                                                                                                                                                                                                                                                                                For table rows, columns, column groups, and row groups the row(s) or column(s) are hidden and the space they would have occupied is (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This was designed for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table. For XUL elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect. For other elements, collapse is treated the same as hidden.

                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                p        { visibility: hidden; }    /* paragraphs won't be visible */
                                                                                                                                                                                                                                                                                                                                                                                                                p.showme { visibility: visible; }   /* except of these with class showme */
                                                                                                                                                                                                                                                                                                                                                                                                                tr.col   { visibility: collapse; }  /* table rows with class col will collapse */
                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                Notes

                                                                                                                                                                                                                                                                                                                                                                                                                The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

                                                                                                                                                                                                                                                                                                                                                                                                                visibility:collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility:visible is specified explicitly on nested tables.

                                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                                                Internet Explorer 4.0
                                                                                                                                                                                                                                                                                                                                                                                                                Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                                                                Opera 4.0
                                                                                                                                                                                                                                                                                                                                                                                                                Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                                                                                                                See also

                                                                                                                                                                                                                                                                                                                                                                                                                display

                                                                                                                                                                                                                                                                                                                                                                                                                Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 17:25, 27 Apr 2010 by Elchi3

                                                                                                                                                                                                                                                                                                                                                                                                                :visited - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                  :visited

                                                                                                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                                  The :visited pseudo-class lets you select only links that have been visited.

                                                                                                                                                                                                                                                                                                                                                                                                                  Gecko 2.0 note
                                                                                                                                                                                                                                                                                                                                                                                                                  (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                                  Starting in Firefox 4, major limitations to the styles you can apply using this selector have been introduced. For more information on the limitations and the motivation for them, see Privacy and the :visited selector. The same limitations have been adopted by other browsers, including Safari 5/4.1 and Chrome 6.

                                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                                  a:visited { color: #4b2f89; }
                                                                                                                                                                                                                                                                                                                                                                                                                  a:visited { background-color: white } 

                                                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                  Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                  Internet Explorer 3.5
                                                                                                                                                                                                                                                                                                                                                                                                                  Firefox 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                  Opera 3.5
                                                                                                                                                                                                                                                                                                                                                                                                                  Safari 1.0

                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 10:42, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                  white-space - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                    white-space

                                                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                    The white-space CSS property is used to to describe how whitespace inside the element is handled.

                                                                                                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                    white-space:  normal | pre | nowrap | pre-wrap | pre-line | 
                                                                                                                                                                                                                                                                                                                                                                                                                    inherit

                                                                                                                                                                                                                                                                                                                                                                                                                    Values

                                                                                                                                                                                                                                                                                                                                                                                                                    normal
                                                                                                                                                                                                                                                                                                                                                                                                                    Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.
                                                                                                                                                                                                                                                                                                                                                                                                                    pre
                                                                                                                                                                                                                                                                                                                                                                                                                    Sequences of whitespace are preserved, lines are only broken at newline characters in the source.
                                                                                                                                                                                                                                                                                                                                                                                                                    nowrap
                                                                                                                                                                                                                                                                                                                                                                                                                    Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
                                                                                                                                                                                                                                                                                                                                                                                                                    pre-wrap New in Firefox 3
                                                                                                                                                                                                                                                                                                                                                                                                                    Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and as necessary to fill line boxes.
                                                                                                                                                                                                                                                                                                                                                                                                                    For backward compatibility with Firefox 2, you may wish to also include -moz-pre-wrap, which does the same thing in older versions of Firefox but is ignored in Firefox 3.5 and later.
                                                                                                                                                                                                                                                                                                                                                                                                                    pre-line New in Firefox 3.5
                                                                                                                                                                                                                                                                                                                                                                                                                    Sequences of whitespace are collapsed. Lines are broken at newlines in the source and as necessary to fill line boxes.

                                                                                                                                                                                                                                                                                                                                                                                                                    The following table summarizes the behavior of various white-space values:

                                                                                                                                                                                                                                                                                                                                                                                                                      New lines Spaces and tabs Text wrapping
                                                                                                                                                                                                                                                                                                                                                                                                                    normal Collapse Collapse Wrap
                                                                                                                                                                                                                                                                                                                                                                                                                    pre Preserve Preserve No wrap
                                                                                                                                                                                                                                                                                                                                                                                                                    nowrap Collapse Collapse No wrap
                                                                                                                                                                                                                                                                                                                                                                                                                    pre-wrap Preserve Preserve Wrap
                                                                                                                                                                                                                                                                                                                                                                                                                    pre-line Preserve Collapse Wrap

                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                    code { white-space: pre; }

                                                                                                                                                                                                                                                                                                                                                                                                                    Notes

                                                                                                                                                                                                                                                                                                                                                                                                                    white-space:pre-line is not implemented in Firefox prior to version 3.5 (Gecko 1.9.1).

                                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                    Browser Lowest version Support of
                                                                                                                                                                                                                                                                                                                                                                                                                    Internet Explorer 5.5 normal | nowrap
                                                                                                                                                                                                                                                                                                                                                                                                                    5.5 [*]
                                                                                                                                                                                                                                                                                                                                                                                                                    6.0 normal | pre | nowrap
                                                                                                                                                                                                                                                                                                                                                                                                                    8.0 normal | pre | nowrap | pre-wrap | pre-line
                                                                                                                                                                                                                                                                                                                                                                                                                    Firefox (Gecko) 1.0 (1.0) normal | pre | nowrap | -moz-pre-wrap
                                                                                                                                                                                                                                                                                                                                                                                                                    3.0 (1.9) normal | pre | nowrap | pre-wrap | -moz-pre-wrap
                                                                                                                                                                                                                                                                                                                                                                                                                    3.5 (1.9.1) normal | pre | nowrap | pre-wrap | pre-line
                                                                                                                                                                                                                                                                                                                                                                                                                    Opera 4.0 normal | pre | nowrap
                                                                                                                                                                                                                                                                                                                                                                                                                    8.0 normal | pre | nowrap | pre-wrap
                                                                                                                                                                                                                                                                                                                                                                                                                    9.5 normal | pre | nowrap | pre-wrap | pre-line
                                                                                                                                                                                                                                                                                                                                                                                                                    Safari (WebKit) 1.0 (85) normal | pre | nowrap
                                                                                                                                                                                                                                                                                                                                                                                                                    3.0 (522) normal | pre | nowrap | pre-wrap | pre-line

                                                                                                                                                                                                                                                                                                                                                                                                                    [*] Internet Explorer 5.5+ supports word-wrap: break-word;
                                                                                                                                                                                                                                                                                                                                                                                                                    The following code allows line breaking inside pre elements:

                                                                                                                                                                                                                                                                                                                                                                                                                    pre {
                                                                                                                                                                                                                                                                                                                                                                                                                          word-wrap: break-word;      /* IE 5.5-7 */
                                                                                                                                                                                                                                                                                                                                                                                                                          white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
                                                                                                                                                                                                                                                                                                                                                                                                                          white-space: pre-wrap;      /* current browsers */
                                                                                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 10:02, 31 Jul 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                                                                    widows - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                      widows

                                                                                                                                                                                                                                                                                                                                                                                                                      Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                      1. 1. Browser Compatibility
                                                                                                                                                                                                                                                                                                                                                                                                                      2. 2. See Also
                                                                                                                                                                                                                                                                                                                                                                                                                      Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                      1. 1. Browser Compatibility
                                                                                                                                                                                                                                                                                                                                                                                                                      2. 2. See Also

                                                                                                                                                                                                                                                                                                                                                                                                                      In printing, a "widow" is the last line of a paragraph appearing alone at the top of a page, such as the line seen inside the red box in the illustration below.The widows property avoids widows by specifying the minimum number of lines of a paragraph that appear at the top of a page when a Web page is printed.

                                                                                                                                                                                                                                                                                                                                                                                                                      Example : p {widows: 3}

                                                                                                                                                                                                                                                                                                                                                                                                                      Default value will be :2

                                                                                                                                                                                                                                                                                                                                                                                                                      Minimum number of lines of a paragraph that must appear at the top of a page.

                                                                                                                                                                                                                                                                                                                                                                                                                      Inherit : Use the same computed value as the parent element for this property.

                                                                                                                                                                                                                                                                                                                                                                                                                      Apples to - Block level elements

                                                                                                                                                                                                                                                                                                                                                                                                                      Browser Compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                      Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                                                      Internet Explorer IE 8
                                                                                                                                                                                                                                                                                                                                                                                                                      Firefox (Gecko) --
                                                                                                                                                                                                                                                                                                                                                                                                                      Opera 9.2

                                                                                                                                                                                                                                                                                                                                                                                                                      Safari | Chrome | WebKit

                                                                                                                                                                                                                                                                                                                                                                                                                      --

                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (0)

                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags
                                                                                                                                                                                                                                                                                                                                                                                                                      • No tags

                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 22:46, 29 Jan 2011 by nimbupani

                                                                                                                                                                                                                                                                                                                                                                                                                      width - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                        width

                                                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                        The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

                                                                                                                                                                                                                                                                                                                                                                                                                        • Initial value : auto
                                                                                                                                                                                                                                                                                                                                                                                                                        • Applies to: block level and replaced elements
                                                                                                                                                                                                                                                                                                                                                                                                                        • Inherited : no
                                                                                                                                                                                                                                                                                                                                                                                                                        • Percentages: refer to the width of the containing block
                                                                                                                                                                                                                                                                                                                                                                                                                        • Media: visual
                                                                                                                                                                                                                                                                                                                                                                                                                        • Computed value :  the percentage or auto as specified or the absolute length

                                                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                        width:  <length> | <percentage> | auto | inherit | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available

                                                                                                                                                                                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                                                                                                                                                                                        <length>
                                                                                                                                                                                                                                                                                                                                                                                                                        See <length> for possible units.
                                                                                                                                                                                                                                                                                                                                                                                                                        <percentage>
                                                                                                                                                                                                                                                                                                                                                                                                                        Specified as a <percentage> of containing block's width.
                                                                                                                                                                                                                                                                                                                                                                                                                        auto
                                                                                                                                                                                                                                                                                                                                                                                                                        The browser will calculate and select a width for the specified element.

                                                                                                                                                                                                                                                                                                                                                                                                                        Mozilla Extensions

                                                                                                                                                                                                                                                                                                                                                                                                                        -moz-max-content
                                                                                                                                                                                                                                                                                                                                                                                                                        New in Firefox 3 The intrinsic preferred width.
                                                                                                                                                                                                                                                                                                                                                                                                                        -moz-min-content
                                                                                                                                                                                                                                                                                                                                                                                                                        New in Firefox 3 The intrinsic minimum width.
                                                                                                                                                                                                                                                                                                                                                                                                                        -moz-available
                                                                                                                                                                                                                                                                                                                                                                                                                        New in Firefox 3 The containing block width minus horizontal margin, border and padding.
                                                                                                                                                                                                                                                                                                                                                                                                                        -moz-fit-content
                                                                                                                                                                                                                                                                                                                                                                                                                        New in Firefox 3 The larger of:
                                                                                                                                                                                                                                                                                                                                                                                                                        • the intrinsic minimum width
                                                                                                                                                                                                                                                                                                                                                                                                                        • the smaller of the intrinsic preferred width and the available width

                                                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                                                        View Live Examples

                                                                                                                                                                                                                                                                                                                                                                                                                        table { width: 100%; }
                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                        img   { width: 200px; }
                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                        form  { width: auto; }
                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                        p     { width: 40em; }
                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                        p { background: gold }
                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                        The Mozilla community produces a lot of great software.

                                                                                                                                                                                                                                                                                                                                                                                                                        p { background: lightgreen;
                                                                                                                                                                                                                                                                                                                                                                                                                            width: intrinsic;         /* Safari/WebKit */
                                                                                                                                                                                                                                                                                                                                                                                                                            width: -moz-max-content;  /* Firefox/Gecko */
                                                                                                                                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                        The Mozilla community produces a lot of great software.

                                                                                                                                                                                                                                                                                                                                                                                                                        p { background: lightblue;  max-width: -moz-min-content; }
                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                        The Mozilla community produces a lot of great software.

                                                                                                                                                                                                                                                                                                                                                                                                                        Notes

                                                                                                                                                                                                                                                                                                                                                                                                                        The min-width and max-width properties override width.

                                                                                                                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                        Browser Lowest Version intrinsic width intrinsic minimum width
                                                                                                                                                                                                                                                                                                                                                                                                                        Internet Explorer 4.0 --- --- --- ---
                                                                                                                                                                                                                                                                                                                                                                                                                        Firefox (Gecko) 1.0 (1.0) 3.0 (1.9) -moz-max-content
                                                                                                                                                                                                                                                                                                                                                                                                                        -moz-fit-content
                                                                                                                                                                                                                                                                                                                                                                                                                        3.0 (1.9) -moz-min-content
                                                                                                                                                                                                                                                                                                                                                                                                                        Opera 3.5 --- --- --- ---
                                                                                                                                                                                                                                                                                                                                                                                                                        Safari (WebKit) 1.0 (85) 2.0 (412) ? intrinsic --- ---

                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 11:32, 16 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                        word-spacing - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                          word-spacing

                                                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                                                                          The word-spacing CSS property specifies spacing behavior between words.

                                                                                                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                          word-spacing:  normal | <length>
                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                          Values

                                                                                                                                                                                                                                                                                                                                                                                                                          normal 
                                                                                                                                                                                                                                                                                                                                                                                                                          The normal inter-word space, as defined by the current font and/or the UA.
                                                                                                                                                                                                                                                                                                                                                                                                                          <length> 
                                                                                                                                                                                                                                                                                                                                                                                                                          See <length> value for possible units.

                                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                                          p { word-spacing: 1em; }
                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                          Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                          Internet Explorer 6.0
                                                                                                                                                                                                                                                                                                                                                                                                                          Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                                                                          Opera 3.5
                                                                                                                                                                                                                                                                                                                                                                                                                          Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 00:14, 14 May 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                                                                          word-wrap - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                            word-wrap

                                                                                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                            Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                                                            (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                            The word-wrap CSS property is used to to specify whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit.

                                                                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                            word-wrap:  normal | break-word
                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                                                                                                                                                                                            normal
                                                                                                                                                                                                                                                                                                                                                                                                                            Lines may only break at normal word break points.
                                                                                                                                                                                                                                                                                                                                                                                                                            break-word
                                                                                                                                                                                                                                                                                                                                                                                                                            Unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                            p { width:13em; background:gold; }
                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                            FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

                                                                                                                                                                                                                                                                                                                                                                                                                            p { width:13em; background:gold; word-wrap:break-word; }
                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                            FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

                                                                                                                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                            word-wrap 3.5 (1.9.1) 1.0 5.5 10.5 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                            word-wrap 1.0 (1.9.1) 1.0 ? ? 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                            • word-wrap:break-word can be used to work around lack of pre{white-space:pre-wrap} support in IE 5.5-7. See white-space for an example.
                                                                                                                                                                                                                                                                                                                                                                                                                            • IE8 introduced -ms-word-wrap as a synonym for word-wrap. Don't use the -ms- prefix.

                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 02:16, 2 Apr 2011 by Sheppy

                                                                                                                                                                                                                                                                                                                                                                                                                            :active - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                              :active

                                                                                                                                                                                                                                                                                                                                                                                                                              Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1. Specifications
                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2. Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                              The :active pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. It is often used on <a> and <button> HTML elements.

                                                                                                                                                                                                                                                                                                                                                                                                                              Note: on system with mice having several buttons, CSS 3 specifies that the :active pseudo-class must only apply to the primary button, typically the left-most button on mice for right-handed.

                                                                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                              Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                              Internet Explorer 4.0  (only for <a>)
                                                                                                                                                                                                                                                                                                                                                                                                                              Firefox 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                              Opera 5.0  (only for <a>)
                                                                                                                                                                                                                                                                                                                                                                                                                              7.0
                                                                                                                                                                                                                                                                                                                                                                                                                              Safari 1.0

                                                                                                                                                                                                                                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 10:45, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                              :after | ::after - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                :after | ::after

                                                                                                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                :after creates a pseudo-element that is the last child of the element matched. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

                                                                                                                                                                                                                                                                                                                                                                                                                                Firefox 3.5 note

                                                                                                                                                                                                                                                                                                                                                                                                                                Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions. Note this is independent from the colon notation issue mentioned below.

                                                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                element:after  { style properties }  /* CSS2 syntax */
                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                element::after { style properties }  /* CSS3 syntax */

                                                                                                                                                                                                                                                                                                                                                                                                                                The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

                                                                                                                                                                                                                                                                                                                                                                                                                                Note:  Microsoft Internet Explorer 8 supports the :after notation only.

                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                .boringtext:after {
                                                                                                                                                                                                                                                                                                                                                                                                                                   content:    " Thank you for reading all this!"; 
                                                                                                                                                                                                                                                                                                                                                                                                                                   font-size:  small; 
                                                                                                                                                                                                                                                                                                                                                                                                                                   color:      red;
                                                                                                                                                                                                                                                                                                                                                                                                                                   background: gray; 
                                                                                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                Browser Lowest Version Support of
                                                                                                                                                                                                                                                                                                                                                                                                                                Internet Explorer 8.0 :after
                                                                                                                                                                                                                                                                                                                                                                                                                                Firefox (Gecko) 1.0 (1.0) :after
                                                                                                                                                                                                                                                                                                                                                                                                                                1.0 (1.5) :after | ::after
                                                                                                                                                                                                                                                                                                                                                                                                                                Opera 4.0 :after
                                                                                                                                                                                                                                                                                                                                                                                                                                7.0 :after | ::after
                                                                                                                                                                                                                                                                                                                                                                                                                                Safari (WebKit) 1.0 (85) :after | ::after

                                                                                                                                                                                                                                                                                                                                                                                                                                See Also

                                                                                                                                                                                                                                                                                                                                                                                                                                :before, content

                                                                                                                                                                                                                                                                                                                                                                                                                                Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 12:36, 8 Apr 2011 by Spirit55555

                                                                                                                                                                                                                                                                                                                                                                                                                                :before | ::before - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                  :before | ::before

                                                                                                                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                  :before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.

                                                                                                                                                                                                                                                                                                                                                                                                                                  Firefox 3.5 note

                                                                                                                                                                                                                                                                                                                                                                                                                                  Firefox prior to version 3.5 only implemented the CSS 2.0 version of :before. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions. (Note this is independent from the :: notation issue mentioned below.)

                                                                                                                                                                                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                  element:before  { style properties }  /* CSS2 syntax */
                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                  element::before { style properties }  /* CSS3 syntax */
                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                  The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.

                                                                                                                                                                                                                                                                                                                                                                                                                                  Note:  Microsoft Internet Explorer 8 only supports the :before notation.

                                                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                  q:before { content: "»" }
                                                                                                                                                                                                                                                                                                                                                                                                                                  q:after { content: '«' }
                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                  <q>Some quotes</q>, he said, <q>are better than none</q>.
                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                  Result:    »Some quotes«, he said, »are better than none«.

                                                                                                                                                                                                                                                                                                                                                                                                                                  Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                  Although the positioning fixes in Firefox 3.5 do not allow content to be generated as a separate previous sibling (as per the CSS spec stating "The :before and :after pseudo-elements elements interact with other boxes... as if they were real elements inserted just inside their associated element."), they can be used to provide a slight improvement on tableless layouts (e.g., to achieve centering) in that, as long as the content to be centered is wrapped in a further child, a column before and after the content can be introduced without adding a previous or following sibling (i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after). (And always remember to add a width to a float, since, otherwise, it will not float!)

                                                                                                                                                                                                                                                                                                                                                                                                                                  <style type="text/css">
                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                  #floatme {float:left; width:50%;}
                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                  .example:before {
                                                                                                                                                                                                                                                                                                                                                                                                                                    content: "Floated Before"; /* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
                                                                                                                                                                                                                                                                                                                                                                                                                                    float: left;
                                                                                                                                                                                                                                                                                                                                                                                                                                    width:25%
                                                                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                                                                                  .example:after {
                                                                                                                                                                                                                                                                                                                                                                                                                                    content: "Floated After";
                                                                                                                                                                                                                                                                                                                                                                                                                                    float: right;
                                                                                                                                                                                                                                                                                                                                                                                                                                    width:25%
                                                                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                  /* For styling */
                                                                                                                                                                                                                                                                                                                                                                                                                                  .example:before, .example:after, .first {
                                                                                                                                                                                                                                                                                                                                                                                                                                    background: yellow;
                                                                                                                                                                                                                                                                                                                                                                                                                                    color: red;
                                                                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                  </style>
                                                                                                                                                                                                                                                                                                                                                                                                                                  <div class="example">
                                                                                                                                                                                                                                                                                                                                                                                                                                  <span id="floatme">"Floated Before" should be generated on the left of the 
                                                                                                                                                                                                                                                                                                                                                                                                                                  viewport and not allow overflow in this line to flow under it. Likewise 
                                                                                                                                                                                                                                                                                                                                                                                                                                  should "Floated After" appear on the right of the viewport and not allow this 
                                                                                                                                                                                                                                                                                                                                                                                                                                  line to flow under it.</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                  </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser Lowest Version Support of
                                                                                                                                                                                                                                                                                                                                                                                                                                  Internet Explorer 8.0 :before
                                                                                                                                                                                                                                                                                                                                                                                                                                  Firefox (Gecko) 1.0 (1.0) :before
                                                                                                                                                                                                                                                                                                                                                                                                                                  1.0 (1.5) :before | ::before
                                                                                                                                                                                                                                                                                                                                                                                                                                  Safari (WebKit) 1.0 (85) :before | ::before
                                                                                                                                                                                                                                                                                                                                                                                                                                  Opera 4.0 :before
                                                                                                                                                                                                                                                                                                                                                                                                                                  7.0 :before | ::before

                                                                                                                                                                                                                                                                                                                                                                                                                                  See Also

                                                                                                                                                                                                                                                                                                                                                                                                                                  :after, content

                                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 22:27, 4 Jul 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                                                                                  @charset - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                    @charset

                                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                    The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant.

                                                                                                                                                                                                                                                                                                                                                                                                                                    This at-rule is useful when using non-ASCII characters in some CSS properties, like content.

                                                                                                                                                                                                                                                                                                                                                                                                                                    As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) :

                                                                                                                                                                                                                                                                                                                                                                                                                                    1. The value given by the charset attribute of the Content-Type: HTTP header or the equivalent in the protocol used to serve the style sheet.
                                                                                                                                                                                                                                                                                                                                                                                                                                    2. The value of the Unicode byte-order character placed at the beginning of the file.
                                                                                                                                                                                                                                                                                                                                                                                                                                    3. The @charset CSS at-rule.
                                                                                                                                                                                                                                                                                                                                                                                                                                    4. Use the character encoding defined by the referring document: the charset attribute of the <link> element. This method is obsoleted in HTML5 and must not be used.
                                                                                                                                                                                                                                                                                                                                                                                                                                    5. Assume that the document is UTF-8.

                                                                                                                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                    @charset charset
                                                                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                                                                    where :

                                                                                                                                                                                                                                                                                                                                                                                                                                    charset
                                                                                                                                                                                                                                                                                                                                                                                                                                    Is a <string> denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the IANA-registry. If several names are associated with an encoding, only the one marked with preferred must be used.

                                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                    @charset "UTF-8"       // Set the encoding of the style sheet to Unicode UTF-8
                                                                                                                                                                                                                                                                                                                                                                                                                                    @charset 'iso-8859-15' // Set the encoding of the style sheet to Latin-9 (Western European languages, with euro sign)
                                                                                                                                                                                                                                                                                                                                                                                                                                     @charset "UTF-8"      // Invalid, there is a character before the at-rule
                                                                                                                                                                                                                                                                                                                                                                                                                                    @charset UTF-8         // Invalid, without ' or ", the charset is not a CSS <string>
                                                                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                    Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                    CSS Level 2 (Revision 1) Recommendation  

                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                    Basic support 2.0 1.5 (1.8) [*] 5.5 [**] [1] 9 4
                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                    Basic support 2.1 1.0 (1.8) 5.5 [**] [2] 10.0 4

                                                                                                                                                                                                                                                                                                                                                                                                                                    [*] Firefox 1.0 supported only an invalid syntax where the character encoding is not set between single or double quotes.
                                                                                                                                                                                                                                                                                                                                                                                                                                    [**] From IE 5.5 to IE 7 included, IE also supported the invalid syntax where the character encoding is not set between single or double quotes.

                                                                                                                                                                                                                                                                                                                                                                                                                                    See also

                                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 18:59, 31 Oct 2011 by Sheppy

                                                                                                                                                                                                                                                                                                                                                                                                                                    :checked - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                      :checked

                                                                                                                                                                                                                                                                                                                                                                                                                                      Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                        1. 1.1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                        2. 1.2. Syntax 
                                                                                                                                                                                                                                                                                                                                                                                                                                        3. 1.3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                          1. 1.3.1. Example selectors
                                                                                                                                                                                                                                                                                                                                                                                                                                        4. 1.4. Specifications
                                                                                                                                                                                                                                                                                                                                                                                                                                      1. 2. Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                      The :checked pseudo-class selector represents any radio (<input type="radio">) or checkbox ( <option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

                                                                                                                                                                                                                                                                                                                                                                                                                                      Syntax 

                                                                                                                                                                                                                                                                                                                                                                                                                                      element:checked { style properties }

                                                                                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                      Example selectors

                                                                                                                                                                                                                                                                                                                                                                                                                                      input[type="radio"]:checked
                                                                                                                                                                                                                                                                                                                                                                                                                                      Represents all radio buttons on the page that are checked
                                                                                                                                                                                                                                                                                                                                                                                                                                      input[type="checkbox"]:checked
                                                                                                                                                                                                                                                                                                                                                                                                                                      Represents all checkboxes on the page that are checked

                                                                                                                                                                                                                                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                      Basic support ? 1.0 (1.7 or earlier) 9 9.0 ?
                                                                                                                                                                                                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 12:22, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                      :default - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                        :default

                                                                                                                                                                                                                                                                                                                                                                                                                                        Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                        1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                        2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                        3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                        4. 4. Specification
                                                                                                                                                                                                                                                                                                                                                                                                                                        Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                        1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                        2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                        3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                        4. 4. Specification

                                                                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                        This content covers features introduced in Firefox 3.

                                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                        The :default pseudo-class represents any user interface element that is the default among a group of similar elements.

                                                                                                                                                                                                                                                                                                                                                                                                                                        For example, the default button in a set of buttons could be selected using this pseudo-class.

                                                                                                                                                                                                                                                                                                                                                                                                                                        User interface elements that permit multiple selections may have multiple defaults set in order to initially appear with multiple items selected. In that case all defaults can be represented using the :default pseudo-class.

                                                                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                        :default { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                        :default
                                                                                                                                                                                                                                                                                                                                                                                                                                        {
                                                                                                                                                                                                                                                                                                                                                                                                                                            background-color: lime;
                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                        ...where...

                                                                                                                                                                                                                                                                                                                                                                                                                                        <form method="get">
                                                                                                                                                                                                                                                                                                                                                                                                                                          <p><input type="submit" id="submit1"></p>
                                                                                                                                                                                                                                                                                                                                                                                                                                          <p><input type="submit" id="submit2"></p>
                                                                                                                                                                                                                                                                                                                                                                                                                                          <p><input type="reset"></p>
                                                                                                                                                                                                                                                                                                                                                                                                                                         </form>

                                                                                                                                                                                                                                                                                                                                                                                                                                        This example causes the background color to be lime for the default submit button in the form.

                                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 12:25, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                        :disabled - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                          :disabled

                                                                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                          The :disabled pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

                                                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                          Example selectors

                                                                                                                                                                                                                                                                                                                                                                                                                                          input:disabled
                                                                                                                                                                                                                                                                                                                                                                                                                                          Selects all disabled inputs
                                                                                                                                                                                                                                                                                                                                                                                                                                          select.country:disabled
                                                                                                                                                                                                                                                                                                                                                                                                                                          Targets a select element with class country that is disabled

                                                                                                                                                                                                                                                                                                                                                                                                                                          Usage example

                                                                                                                                                                                                                                                                                                                                                                                                                                          The following CSS:

                                                                                                                                                                                                                                                                                                                                                                                                                                          .input[type="text"]:disabled {background:#ccc}
                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                                          applied to this HTML5 fragment:

                                                                                                                                                                                                                                                                                                                                                                                                                                          <form action="#">
                                                                                                                                                                                                                                                                                                                                                                                                                                            <fieldset>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <legend>Shipping address</legend>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="shipping_firstName" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="shipping_lastName" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="shipping_address1" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="shipping_address2" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="shipping_zipCode" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="shipping_town" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                            </fieldset>
                                                                                                                                                                                                                                                                                                                                                                                                                                            <fieldset>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <legend>Billing address</legend>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                <input type="checkbox" name="billing_is_shipping" value="true" checked> 
                                                                                                                                                                                                                                                                                                                                                                                                                                                Billing address is the same as shipping address
                                                                                                                                                                                                                                                                                                                                                                                                                                              </label>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="billing_firstName" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="billing_lastName" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="billing_address1" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="billing_address2" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="billing_zipCode" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                              <input type="text" name="billing_town" disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                            </fieldset>
                                                                                                                                                                                                                                                                                                                                                                                                                                          </form>

                                                                                                                                                                                                                                                                                                                                                                                                                                          Will result in all text elements in the billing fieldset having a light grey background.

                                                                                                                                                                                                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                          Basic support ? 1.0 (1.7 or earlier) 9 9.0 ?
                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 12:32, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                          :empty - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                            :empty

                                                                                                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                            The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

                                                                                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                            span:empty { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                            span:empty::before  { background-color: lime; }

                                                                                                                                                                                                                                                                                                                                                                                                                                            ...where...

                                                                                                                                                                                                                                                                                                                                                                                                                                            <span></span>

                                                                                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                            Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                            Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                                                            Firefox (Gecko) 1.5 (1.8)
                                                                                                                                                                                                                                                                                                                                                                                                                                            Opera 9.5
                                                                                                                                                                                                                                                                                                                                                                                                                                            Safari (WebKit) 3.1 (525), very buggy before

                                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 12:00, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                            :enabled - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                              :enabled

                                                                                                                                                                                                                                                                                                                                                                                                                                              Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1. Specifications
                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2. Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                              Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                              Internet Explorer ?
                                                                                                                                                                                                                                                                                                                                                                                                                                              Firefox ?
                                                                                                                                                                                                                                                                                                                                                                                                                                              Opera ?
                                                                                                                                                                                                                                                                                                                                                                                                                                              Safari ?

                                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                              Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 05:11, 14 Feb 2009 by BijuGC

                                                                                                                                                                                                                                                                                                                                                                                                                                              :first-child - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                :first-child

                                                                                                                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                The :first-child pseudo-class represents any element that is the first child element of its parent.

                                                                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                element:first-child { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                span:first-child
                                                                                                                                                                                                                                                                                                                                                                                                                                                {
                                                                                                                                                                                                                                                                                                                                                                                                                                                    background-color: lime;
                                                                                                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                                                                                                ...where...

                                                                                                                                                                                                                                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                    <span>This span is limed!</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                    <span>This span is not. :(</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                  </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                ... should look like ...
                                                                                                                                                                                                                                                                                                                                                                                                                                                This span is limed! This span is not. :(

                                                                                                                                                                                                                                                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                Basic support 4.0 3.0 (1.9) 7 9.5 4
                                                                                                                                                                                                                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                Basic support 1.0 1.0 (1.9.1) 7 10.0 3.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                • In Internet Explorer 8, if a element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

                                                                                                                                                                                                                                                                                                                                                                                                                                                Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 14:33, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                :first - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                  :first

                                                                                                                                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                  The :first page pseudo-class describes the styling of the first page when printing a document.

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Note: you can not change all CSS properties. You can only change the margins, orphans, widows, and page breaks of the document. All other CSS properties will be ignored.

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                  @page :first {
                                                                                                                                                                                                                                                                                                                                                                                                                                                    margin:2in 3in;
                                                                                                                                                                                                                                                                                                                                                                                                                                                  } 
                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                                  Note: you may only use the absolute length units when defining the margin. Please see the page about length for more information.

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                                  Internet Explorer
                                                                                                                                                                                                                                                                                                                                                                                                                                                  8.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                  Firefox (Gecko) ---
                                                                                                                                                                                                                                                                                                                                                                                                                                                  Opera
                                                                                                                                                                                                                                                                                                                                                                                                                                                  9.2
                                                                                                                                                                                                                                                                                                                                                                                                                                                  Safari (WebKit) ---

                                                                                                                                                                                                                                                                                                                                                                                                                                                  See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 11:21, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                  ::first-letter | :first-letter - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                    ::first-letter | :first-letter

                                                                                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                    The :first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                    /* make the first letter of every paragraph red and big */
                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                    p:first-letter  { color: red;  font-size: 130%; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                    CSS 3 introduced the ::first-letter notation in order to establish a discrimination between pseudo-classes and pseudo-elements. Don't use the double colon notation yet for compatibility with Internet Explorer.

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser Lowest Version Support of
                                                                                                                                                                                                                                                                                                                                                                                                                                                    Internet Explorer 5.5 :first-letter
                                                                                                                                                                                                                                                                                                                                                                                                                                                    Firefox (Gecko) 1.0 (1.0) :first-letter
                                                                                                                                                                                                                                                                                                                                                                                                                                                    1.0 (1.5) :first-letter | ::first-letter
                                                                                                                                                                                                                                                                                                                                                                                                                                                    Opera 3.5 :first-letter
                                                                                                                                                                                                                                                                                                                                                                                                                                                    7.0 :first-letter | ::first-letter
                                                                                                                                                                                                                                                                                                                                                                                                                                                    Safari (WebKit) 1.0 :first-letter | ::first-letter

                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 15:34, 25 May 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                                                                                                    ::first-line | :first-line - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                      ::first-line | :first-line

                                                                                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                      The :first-line CSS pseudo-element applies styles to the first line of a element. However, the selector :first-line does not match any real HTML element.

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                      /* change the letters of the first line of every paragraph to uppercase */
                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                                                      p:first-line { text-transform: uppercase }
                                                                                                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser Lowest version Support of
                                                                                                                                                                                                                                                                                                                                                                                                                                                      Internet Explorer 5.5 :first-line
                                                                                                                                                                                                                                                                                                                                                                                                                                                      Firefox (Gecko) 1.0 (1.0) :first-line
                                                                                                                                                                                                                                                                                                                                                                                                                                                      1.0 (1.5) :first-line | ::first-line
                                                                                                                                                                                                                                                                                                                                                                                                                                                      Opera 3.5 :first-line
                                                                                                                                                                                                                                                                                                                                                                                                                                                      7.0 :first-line | ::first-line
                                                                                                                                                                                                                                                                                                                                                                                                                                                      Safari (WebKit) 1.0 (85) :first-line | ::first-line

                                                                                                                                                                                                                                                                                                                                                                                                                                                      For compatibility with IE 5.5-8 avoid CSS3 notation ::first-line (use CSS2 notation :first-line).

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 13:22, 14 Aug 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                                                                                                      :first-of-type - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                        :first-of-type

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                        1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                        2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                        3. 3. Example
                                                                                                                                                                                                                                                                                                                                                                                                                                                        4. 4. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                        Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                        1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                        2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                        3. 3. Example
                                                                                                                                                                                                                                                                                                                                                                                                                                                        4. 4. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                        (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                        The :first-of-type pseudo-class represents the first sibling of the given type in the list of children of its parent element.

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                        element:first-of-type { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Example

                                                                                                                                                                                                                                                                                                                                                                                                                                                        To match the first data cell in a table row, you can use this:

                                                                                                                                                                                                                                                                                                                                                                                                                                                        tr > td:first-of-type

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 11:56, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                        :focus - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                          :focus

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                          1. 1. Specifications
                                                                                                                                                                                                                                                                                                                                                                                                                                                          2. 2. Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                                          Internet Explorer 8.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                          Firefox 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                          Opera 7.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                          Safari (1.0 ?)

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 03:20, 10 Apr 2009 by Jürgen Jeka

                                                                                                                                                                                                                                                                                                                                                                                                                                                          @font-face - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                            @font-face

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                            @font-face allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                            @font-face {
                                                                                                                                                                                                                                                                                                                                                                                                                                                              font-family: <a-remote-font-name>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                              src: <source> [,<source>]*;
                                                                                                                                                                                                                                                                                                                                                                                                                                                              [font-weight: <weight>];
                                                                                                                                                                                                                                                                                                                                                                                                                                                              [font-style: <style>];
                                                                                                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                                                                                                                                                                                                                            <a-remote-font-name> 
                                                                                                                                                                                                                                                                                                                                                                                                                                                            Specifies a font name that will be used as font face value for font properties.
                                                                                                                                                                                                                                                                                                                                                                                                                                                            <source> 
                                                                                                                                                                                                                                                                                                                                                                                                                                                            URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name").
                                                                                                                                                                                                                                                                                                                                                                                                                                                            <weight> 
                                                                                                                                                                                                                                                                                                                                                                                                                                                            A font weight value.
                                                                                                                                                                                                                                                                                                                                                                                                                                                            <style> 
                                                                                                                                                                                                                                                                                                                                                                                                                                                            A font style value.

                                                                                                                                                                                                                                                                                                                                                                                                                                                            You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                            This example simply specifies a downloadable font to use, applying it to the entire body of the document.

                                                                                                                                                                                                                                                                                                                                                                                                                                                            View live sample

                                                                                                                                                                                                                                                                                                                                                                                                                                                            <html>
                                                                                                                                                                                                                                                                                                                                                                                                                                                            <head>
                                                                                                                                                                                                                                                                                                                                                                                                                                                              <title>Web Font Sample</title>
                                                                                                                                                                                                                                                                                                                                                                                                                                                              <style type="text/css" media="screen, print">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                @font-face {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  font-family: "Bitstream Vera Serif Bold";
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                body { font-family: "Bitstream Vera Serif Bold", serif }
                                                                                                                                                                                                                                                                                                                                                                                                                                                              </style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                            </head>
                                                                                                                                                                                                                                                                                                                                                                                                                                                            <body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                              This is Bitstream Vera Serif Bold.
                                                                                                                                                                                                                                                                                                                                                                                                                                                            </body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                            </html>
                                                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                                                            In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user doesn't have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:

                                                                                                                                                                                                                                                                                                                                                                                                                                                            @font-face {
                                                                                                                                                                                                                                                                                                                                                                                                                                                              font-family: MyHelvetica;
                                                                                                                                                                                                                                                                                                                                                                                                                                                              src: local("Helvetica Neue Bold"),
                                                                                                                                                                                                                                                                                                                                                                                                                                                              local("HelveticaNeue-Bold"),
                                                                                                                                                                                                                                                                                                                                                                                                                                                              url(MgOpenModernaBold.ttf);
                                                                                                                                                                                                                                                                                                                                                                                                                                                              font-weight: bold;
                                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                            • In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered.
                                                                                                                                                                                                                                                                                                                                                                                                                                                            • When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading.  As each web font finishes downloading, Gecko updates the text that uses that font.  This allows the user to read the text on the page more quickly.

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                            Basic support 3.5 (1.9.1) 4.0 4.0 10.0 3.1
                                                                                                                                                                                                                                                                                                                                                                                                                                                            WOFF 3.5 (1.9.1) 6.0 9.0 Nightly build Nightly build
                                                                                                                                                                                                                                                                                                                                                                                                                                                            SVG Font --
                                                                                                                                                                                                                                                                                                                                                                                                                                                            Unimplemented (see bug 119490 )
                                                                                                                                                                                                                                                                                                                                                                                                                                                            yes -- yes yes
                                                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                            Basic support (Supported) 1.0 (1.9.1) ? -- 10.0 (Supported)
                                                                                                                                                                                                                                                                                                                                                                                                                                                            WOFF -- 5.0 (5.0) ? -- 11.0 --
                                                                                                                                                                                                                                                                                                                                                                                                                                                            SVG fonts -- --
                                                                                                                                                                                                                                                                                                                                                                                                                                                            Unimplemented (see bug 119490 )
                                                                                                                                                                                                                                                                                                                                                                                                                                                            ? -- 10.0 (Supported)

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Support of the Embedded OpenType font format is not included in the compatibility table because it is a proprietary feature. Prior to IE 9.0, IE supported only this format.
                                                                                                                                                                                                                                                                                                                                                                                                                                                            • TrueType and OpenType are not included because they are superseded by WOFF.

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                            FileSizeDateAttached by 
                                                                                                                                                                                                                                                                                                                                                                                                                                                             VeraSeBd.ttf
                                                                                                                                                                                                                                                                                                                                                                                                                                                            No description
                                                                                                                                                                                                                                                                                                                                                                                                                                                            57.36 kB20:44, 13 Oct 2008SheppyActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                            webfont-sample.html
                                                                                                                                                                                                                                                                                                                                                                                                                                                            No description
                                                                                                                                                                                                                                                                                                                                                                                                                                                            394 bytes15:58, 18 May 2009SheppyActions

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 22:30, 5 Nov 2011 by fvsch

                                                                                                                                                                                                                                                                                                                                                                                                                                                            :hover - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                              :hover

                                                                                                                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                              The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it.

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Usage Note : on touch screens there are no hover possible. The :hover pseudo-class never matches. As touchscreen devices are very common, it is important for web developer not to have content accessible only when hovering over it, as this content would be hidden for users of such devices.

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                              :link:hover { outline: dotted red; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                                                                                                                                                              .foo:hover { background: gold; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                                              Internet Explorer 4.0  (only for <a>)
                                                                                                                                                                                                                                                                                                                                                                                                                                                              7.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                              Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                                                                                                              Opera 4.0  (only for <a>)
                                                                                                                                                                                                                                                                                                                                                                                                                                                              7.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                              Safari (WebKit) 2.0.4 (419)
                                                                                                                                                                                                                                                                                                                                                                                                                                                              various bugs before

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 10:50, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                              @import - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URI. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import url;                      or
                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import url list-of-media-queries;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                where :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                url
                                                                                                                                                                                                                                                                                                                                                                                                                                                                Is a <string> or a <uri> representing the location of the resource to import. The url may be an absolute or relative url.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                list-of-media-queries
                                                                                                                                                                                                                                                                                                                                                                                                                                                                Is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url. If the browser doesn't support any of these media types, it won't even load the linked resource.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import url("fineprint.css") print;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import url("bluish.css") projection, tv;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import 'custom.css';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import "common.css" screen, projection;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                @import url('landscape.css') screen and (orientation:landscape);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                Media Queries Candidate Recommandation Extended the syntax to support any media query and not only simple media types.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                CSS Level 2 (Revision 1) Recommendation Added support for <string> to denote the url of a stylesheet,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                and requirement to insert the @import rule at the beginning of the CSS document.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                CSS Level 1 Recommendation  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                Basic support (Supported) (Supported) 5.5 [1] (Supported) (Supported)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                Basic support (Supported) (Supported) 5.5 [2] (Supported) (Supported)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 14:30, 29 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                :indeterminate - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  :indeterminate

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  The :indeterminate CSS pseudo-class represents any <input type="checkbox"> element whose indeterminate DOM property is set to true by JavaScript. In addition, in some browsers, it can be used to match to <progress> elements in an indeterminate state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  W3C CSS3 Selectors test#177

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                         input, span { background: red }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                         :indeterminate, :indeterminate + span { background: limegreen }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <p><input type=checkbox> <span>Everything in this paragraph should have a green background.</span></p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <script> document.getElementsByTagName("input")[0].indeterminate = true; </script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Checkboxes (Supported) 3.6 (1.9.2) 9.0 10.60 (2.6) 3.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <progress> ? 6.0 (6.0) ? ? ?
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Checkboxes ? 1.0 (1.9.2) ? ? ?
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <progress> ? 6.0 (6.0) ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 12:35, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  integer - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    integer

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    The <integer> CSS data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digit, 0 to 9, eventually preceded by one single + or - sign.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Integers are used in numerous CSS properties, e. g. z-index, line-height, counter-increment, -moz-column-count.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Also any <integer> CSS value is also a <number> CSS value, though the converse is not true.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Interpolation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Values of the <integer> CSS data type can be interpolated in order to allow animations. In that case they are interpolated via integer discrete steps. The calculationis done as if they were real, floating-point, numbers and the discrete value is obtained using the floor function. [1] The speed of the interpolation is determined by the timing function associated with the animation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    These are valid integer values:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    12          Positive integer (without a leading + sign)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    +123        Positive integer (with a leading + sign)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    -456        Negative integer
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    0           Zero
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    +0          Zero, with a leading +
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    -0          Zero, with a leading - (Though strange, this is an allowed value)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    These are invalid integer values:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    12.0        This is a <number>, not an <integer>, though it represents an integer
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    12.         The dot should not be part of an <integer>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    +---12      Only one leading +/- is allowed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ten         Letters are not allowed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    _5          Special characters are not allowed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    \35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    \4E94       Non-arabic numerals are not allowed, even escaped (here: the Japanese 5, 四)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    CSS Values and Units Level 3 Working Draft No significant change from CSS Level 2 (Revision 1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    CSS Level 2 (Revision 1) Recommendation Explicitly defined
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    CSS Level 1 Recommendation Implicitly defined

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser Compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    basic 1.0 1.0 (1.0) 3.0 yes 1.0 (85)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Basic support yes yes yes yes yes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 19:09, 9 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :invalid - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :invalid

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Introduced in Gecko 2.0

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      The :invalid pseudo-class represents any <input> element whose content fails to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      By default, Gecko does not apply a style to the :invalid pseudo-class. However it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      You can disable the glow using the following CSS, or completely override it to alter the appearance of invalid fields.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :invalid {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        box-shadow: none;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :-moz-submit-invalid {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        box-shadow: none;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :-moz-ui-invalid {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        box-shadow:none;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Radio buttons

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      If any of the radio buttons in a group (that is, with the same value for their name attribute) is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group are selected.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      This example presents a simple form that colors elements green when they validate and red when they don't.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <style type="text/css">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :invalid {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          background-color: #ffdddd;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :valid {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          background-color: #ddffdd;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :required {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          border-color: #800000;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          border-width: 3px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      </style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <form>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <label>Enter a URL:</label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <input type="url" />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <br />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <br />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <label>Enter an email address:</label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <input type="email" required/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      </form>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      View this sample live.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Opera 9.5

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Safari | Chrome | WebKit

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      5 | 8 | 534.10

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 12:54, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      @keyframes - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @keyframes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @keyframes lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        To use keyframes, you create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe list. Each @keyframes rule contains a style list of keyframe selectors, each of which is comprised of a percentage along the animation at which the keyframe occurs as well as a block containing the style information for that keyframe.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        You can list the keyframes in any order; they will be handled in the order in which their specified percentages indicate they should occur.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Valid keyframe lists

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Duplicate resolution

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        If multiple keyframe sets exist for a given name, the last one encountered is used. @keyframes rules don't cascade, so animations never drive keyframes from more than one rule set.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        If a given animation time offset is duplicated, the last keyframe in the @keyframes rule for that percentage is used for that frame. There's no cascading within a @keyframes rule if multiple keyframes specify the same percentage values.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        When properties are left out of some keyframes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Any properties that you don't specify in every keyframe are interpolated (with the exception of those that can't be interpolated, which are instead dropped from the animation entirely). For example:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @keyframes identifier {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          0% { top: 0; left: 0; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          30% { top: 50px; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          68%, 72% { left: 50px; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          100% { top: 100px; left: 100%; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 70%, and 100% keyframes.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Only properties that are specified in both the 0% and 100% keyframes will be animated; any property not included in both of those keyframes will retain their starting value for the duration of the animation sequence.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @keyframes <identifier> {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Values

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <identifier>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        A name identifying the keyframe list. This must match the identifier production in CSS syntax.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        from
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        A starting offset of 0%.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        to
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        An ending offset of 100%.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <percentage>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        A percentage of the time through the animation sequence at which the specified keyframe should occur.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        See CSS animations for examples.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Basic support (Supported) -webkit 5.0 (5.0) -moz 10 -ms [1] ? 4.0 -webkit
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (6)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 12:13, 25 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :lang - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :lang

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          The :lang(language-code pseudo-class matches elements based on the langauge the element is determined to be in. In HTML, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Acceptable language-code strings are specified in in HTML 4.0 specification.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          element:lang(language-code) { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          In this example, the lang selector is used to match on the parent of a quote element using child selectors. Its not meant to demonstrate the only way to do this, or even the correct way (which would depend on the type of document). Note, Unicode values are used to specify special quote characters.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :lang(en) > Q { quotes: '\201C' '\201D' '\2018' '\2019'; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :lang(fr) > Q { quotes: '« ' ' »'; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :lang(de) > Q { quotes: '»' '«' '\2039' '\203A'; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ...where...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div lang="fr"><q>This French quote has a <q>nested</q> quote.</q></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div lang="de"><q>This German quote has a <q>nested</q> quote.</q></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div lang="en"><q>This English quote has a <q>nested</q> quote.</q></div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ... should look like ...
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          «This French quote has a «nested» quote.»
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          »This German quote has a ‹nested› quote.«
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          “This English quote has a ‘nested’ quote.”

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser lowest version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Internet Explorer 8.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Firefox (Gecko) 1.0 (1.2)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Opera 8.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Safari (WebKit) 3.1 (525)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Related Pages

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 10:56, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :last-child - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :last-child

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            4. 4. Notes
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            4. 4. Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The :last-child pseudo-class represents any element that is the last child element of its parent.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            element:last-child { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            span:last-child
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                background-color: lime;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ...where...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <span>This span is not limed.</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <span>This span is! :)</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ... should look like ...
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            This span is not limed. This span is! :)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 11:52, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :last-of-type - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              :last-of-type

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              3. 3. Example
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              4. 4. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              3. 3. Example
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              4. 4. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              The :last-of-type pseudo-class represents the last sibling of the given type in the list of children of its parent element.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              element:last-of-type { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Example

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              To match the last data cell in a table row, you can use this:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              tr > td:last-of-type

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 11:57, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              :left - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                :left

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The :left page pseudo-class matches any left page when printing a page. It allows to describe the styling of left-side pages.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page and if it has a major writing direction of right-to-left then it will be a :left page.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Note: You can't change all CSS properties. You can only change the the margin, padding, border, and background properties of the page box. All other CSS properties will be ignored, and only the page box, not the document content on the page, will be affected.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                @page :left {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  margin:2in 3in;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                } 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Feature Gecko Webkit Internet Explorer Opera
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Basic support -- ? 8 9.2

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 20:54, 19 Oct 2011 by Sheppy

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                length - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  length

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  The <length> CSS data type denotes distance measurements. It is a <number> immediately followed by a length unit (px, em, pc, in, mm, ...). Like for any CSS dimension, there is no space between the unit literal and the number.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Many CSS properties take <length> values, such as width, marginpadding, font-size, border-width, text-shadow, ...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  For some properties, using negative lengths is a syntax error, but for some properties, negative lengths are allowed. Note also that some CSS properties accepted <length> values also accepts <percentage> values; though also CSS dimensions, these are not <length> values.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Interpolation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Values of the <length> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. [1] The interpolation happens on the calculated value. The speed of the interpolation is determined by the timing function associated with the animation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Units

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Relative length units

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Font-relative length

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  em
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often has a value expressend in em.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ex
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit represents the x-height of the element's font. On fonts with the 'x' letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ch Experimental
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  rem Experimental
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit represents the font-size of the root element (e.g. the font-size of the <html> element). When used on the font-size on this root element, it represents its initial value.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit is practical in creating perfectly scalable layout. If not supported by the targeted browsers, such layout can be achieved using the em unit, though this is slightly more complex.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Viewport-relative length Experimental

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  vh
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  1/100th of the height of the viewport.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  vw
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  1/100th of the width of the viewport.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  vm
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  1/100th of the minimum value between the height and the width of the viewport.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Absolute length units

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Absolute length units represents a physical measurement and when the physical properties of the output medium are known, such as for print layout. This is done by anchored one of the unit to a physical unit and to defined the other relatively to it. The anchor is done differently for low-resolution devices, like screens, and high-resolution devices, like printers.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  For low-dpi devices, the unit px represents the physical reference pixel and the other are defined relative to it. In that case, 1in is defined as 96px and 1pt as 72px. The consequence of this definition is that on such devices, length described in inches (in), centimeters (cm), millimeters (mm) doesn't necessary match the length of the physical unit with the same name.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  For high-dpi devices, inches (in), centimeters (cm), millimeters (mm) are defined as their physical counterparts. Therefore the px unit is defined relative to them (1/96 of 1 inch).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  px
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Relative to the viewing device.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  For screen display, typically one device pixel (dot) of the display.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  For printers and very high resolution screens one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  mm
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  One millimeter.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  cm
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  One centimeter (10 millimeters).
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  in
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  One inch (2.54 centimeters).
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  pt
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  One point (which is 1/72 of an inch).
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  pc
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  One pica (which is 12 points).
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  mozmm Requires Gecko 2.0 Non-standard
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  An experimental unit which attempts to render at exactly one millimeter regardless of the size or resolution of the display. This is rarely actually what you want, but may be useful in particular for mobile devices.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Requires Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS units and dots-per-inch

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Prior to Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) , Gecko attempted (often incorrectly) to actually compute the real size to render for these, even though most other rendering engines assumed 96 DPI. Now Gecko is consistent with the other browsers.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Starting in Gecko 2.0, changes to how CSS units translate to dots-per-inch (DPI) have been made to become consistent with the behavior of other popular browsers including Safari, Internet Explorer, and Google Chrome.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Some specific examples:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • 1in is now always 96px
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • 3pt is now always 4px
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • 25.4mm is now always 96px

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  In addition, Gecko has improved ability to correctly scale absolute lengths to the actual resolution of the rendering medium, whether that's the screen or paper.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Values and Units Level 3 Working Draft Added ch, rem, vw, vh, vm
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Level 2 (Revision 1) Recommendation pt, pc, px are explicitly defined (were implicitly defined in CSS1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Level 1 Recommendation  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser Compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Basic support 1 1.0 (1.0) 3.0 [2] 3.5 1.0 (85)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ch no 1.0 (width of 'M') [*]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  3.5 (correct)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  9 [3] no no
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  rem 1 (528) [4] 3.6 (1.9.2) 9 [5] no 5.0 (533.17.8)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  vh, vw, vm no [6] no [7] 9 [8] no no [9]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Basic support yes yes yes yes yes
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ch no yes ? no no
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  rem 2.1 yes ? no 4.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  vh, vw, vm no no ? no no

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  [*] Also, didn't work for border-width and outline-width CSS properties.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 19:31, 9 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  :link - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :link

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    The :link pseudo-class lets you select only links that have not yet been visited.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    a:link {color:slaygrate;}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .external:link {background-color:lightblue;}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Basic support 1.5 1.0 (1.9.2) ? ? 3.2

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 17:29, 12 Oct 2011 by Sheppy

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    @media - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      @media

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      @media specifies the target media types (separated by commas) of a set of rules (delimited by curly braces).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      @media <media types> {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        /* media-specific rules */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Media types

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      all
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Suitable for all devices.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      braille
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for braille tactile feedback devices.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      embossed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for paged braille printers.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      handheld
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for handheld devices (typically small screen, limited bandwidth).
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      print
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      projection
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      screen
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended primarily for color computer screens.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      speech
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      tty
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      tv
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Media groups

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Media types are also part of different Media Groups. The following table indicates which types are in which group.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Groups
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Type continuous paged visual audio speech tactile grid bitmap interactive static
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      braille X         X X   X X
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      embossed   X       X X     X
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      handheld X X X X X   X X X X
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      print   X X         X   X
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      projection   X X         X X  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      screen X   X X       X X X
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      speech X       X       X X
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      tty X   X       X   X X
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      tv X X X X       X X X

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      @media print {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        body { font-size: 10pt }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      @media screen {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        body { font-size: 13px }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      @media screen, print {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        body { line-height: 1.2 }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      A multimodal media type is still only one media type. The 'tv' media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Basic support 1.0 1.0 (1.7) 9.0 9.2 1.3
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Basic support 1.0 1.0 (1.7) 9.0 9.0 3.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 07:37, 17 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Mozilla Developer Network

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Mozilla Developer Network

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Join MDN | Log in

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      It's the Web. You drive.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Welcome to the Mozilla Developer Network.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browse Thousands of Docs for Web Developers

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      And even more resources for: Mobile Web Apps · Firefox Add-ons · Mozilla Applications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Latest News & Updates

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Mozilla Hacks Weekly, November 10th 2011

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        We do like reading in Mozilla’s Developer Engagement Team – here are our latest recommendations for you! Weekly links November 10th 2011 If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean. The ...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Naoki Hirata: Mobile Newsletter – Week of November 11th 2011

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Welcome Firefox Mobile testers! Our goal is to provide you with mobile news and guidance towards how and where you as a tester can help out! This Week’s Headlines! Newsletter has now changed to a weekly updates on the Native UI Firefox Mobile Test day is tomorrow! It’s a great ...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • SDK Hack day: what to expect

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        In just over a week the Jetpack project will be hosting an SDK hack day in Mountain View. I’ve decided to keep the event’s format as flexible as possible so as to make sure we can accommodate various levels of experience: If you’re a web developer curious about branching out ...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Firefox Update, Popcorn, Finding Mozillians and more…

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        about:mozilla is a weekly round-up of news and contribution opportunities. Here’s what’s happening this week. Firefox Update An update to Firefox for Windows, Mac, Linux and Android has been released and includes new features that make Web browsing easier, including Twitter search, a clean up of add-ons installed by third ...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Awesome Demos

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      More Demos…

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      What do you think of the new MDN? Please share your feedback with us. Join our mailing list to discuss ways to help create great documentation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :not() - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :not()

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        The negation pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        The specificity of the :not pseudo-class is the specificity of its argument. The :not pseudo-class does not add to the selector specificity, unlike other pseudo-classes.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Notes:
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Useless selectors can be written using this pseudo-class. E.g. :not(*) matching any element which is not any element will never be applied.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • It is possible to rewrite other rules. E.g. foo:not(bar)will match the same element than the simple foo. Nevertheless the specificity of the first one is higher.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :not(selector) { style properties }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Usage Example

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        p:not(.classy) { color: red; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :not(p) { color: green; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ...where...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <p>Some text.</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <p class="classy">Some other text.</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <span>One more text<span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ...should look like...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Some text.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Some other text.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        One more text

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Internet Explorer 9.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Opera 9.5
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 11:10, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :nth-child - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :nth-child

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          The :nth-child pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          The values a and b must both be integers, and the index of an element's first child is 1.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Among other things, this allows selectors to match every other row in a table.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          element:nth-child(an + b) { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Example selectors

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          tr:nth-child(2n+1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Represents the odd rows of an HTML table.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          tr:nth-child(odd)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Represents the odd rows of an HTML table.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          tr:nth-child(2n)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Represents the even rows of an HTML table.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          tr:nth-child(even)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Represents the even rows of an HTML table.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          span:nth-child(0n+1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Represents a span element which is the first child of its parent; this is the same as the :first-child selector.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          span:nth-child(1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Equivalent to the above.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          span:nth-child(-n+3)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Three first span elements.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Usage example

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          span:nth-child(2n+1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              background-color: lime;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ...where...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <span>This span is limed!</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <span>This span is not. :(</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <span>But this one is!</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <span>Sadly, this one is not...</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ... should look like ...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             This span is limed!
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             This span is not. :(
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             But this one is!
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             Sadly, this one is not...
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          SpecificationsEdit section

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Basic support 4.0 3.5 (1.9.1) 9 10.10 4
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Opera can't handle dynamic insertion of elements.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 11:40, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :nth-last-child - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :nth-last-child

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 3.1. Example selectors
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            4. 4. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 3.1. Example selectors
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            4. 4. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The :nth-last-child pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            element:nth-last-child(an + b) { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Example selectors

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            tr:nth-last-child(-n+4)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Matches the last four rows of an HTML table.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            span:nth-last-child(even)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Matches the even elements in their parent element, starting at the last element and working backward.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (6)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 11:42, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :nth-last-of-type - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              :nth-last-of-type

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              3. 3. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              3. 3. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              The :nth-last-of-type pseudo-class matches an element that has an+b-1 siblings with the same element name after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              element:nth-last-of-type(an + b) { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Tags (6)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 11:48, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              :nth-of-type - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                :nth-of-type

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  1. 3.1. Example
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                4. 4. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                3. 3. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  1. 3.1. Example
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                4. 4. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The :nth-of-type pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                element:nth-of-type(an + b) { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Example

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                This example causes the positions of floated images to alternate between right and left.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                img:nth-of-type(2n+1) { float: right; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                img:nth-of-type(2n) { float: left; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Tags (6)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 11:47, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                number - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  number

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  The <number> CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Interpolation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Values of the <number> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. [1] The speed of the interpolation is determined by the timing function associated with the animation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  These are valid number values:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  12          A raw <integer> is also a <number>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  4.01        A positive non-integer <number>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  -456.8      Negative non-integer <number>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  0.0         Zero
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  +0.0        Zero, with a leading +
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  -0.0        Zero, with a leading - (Though strange, this is an allowed value)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  These are invalid number values:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  12.         The dot should be followed by a number
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  +---12.2    Only one leading +/- is allowed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  12.1.1      Only one dot is allowed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  10e3        The e notation is not allowed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Values and Units Level 3 Working Draft No significant change from CSS Level 2 (Revision 1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Level 2 (Revision 1) Recommendation Explicitly defined
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Level 1 Recommendation Implicitly defined

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser Compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  basic 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Basic support yes yes yes yes yes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 19:33, 9 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  :only-child - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :only-child

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    The :only-child pseudo-class represents any element which is the only child of its parent.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    parent child:only-child {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property:value;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    } 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    div span:only-child {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        color:red;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <span>Some red text</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <span>Some regular text</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <span>Some regular text</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Result

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Some red text
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Some regular text Some regular text

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    SpecificationsEdit section
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit section

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Basic support 2 1.5 (1.8) 9 9.5 3.1
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Basic support 2.1 1.0 (1.8) 9 10.0 3.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 11:53, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :only-of-type - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :only-of-type

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      3. 3. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      2. 2. Syntax
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      3. 3. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Introduced in Gecko 1.9.1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      The :only-of-type pseudo-class represents any element that have no siblings of the given type.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      element:only-of-type { style properties }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 11:59, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :optional - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        :optional

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        The :optional CSS pseudo-class represents any <input> element that does not have the required attribute set on it. This allows forms to easily indicate optional fields, and to style them accordingly.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        To provide an appearance for required form fields, the :required pseudo-class may be used.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Feature Firefox Chrome Internet Explorer Safari Opera
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Basic support 4 8 -- 5 9.5

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 07:28, 12 Oct 2011 by berkerpeksag

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @page - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          @page

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          The @page rule is used to modify some CSS properties when printing a document.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Note: you can not change all CSS properties. You can only change the margins, orphans, widows, and page breaks of the document. All other CSS properties will be ignored.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          @page :pseudo-class {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            margin:2in;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Please refer to the various pseudo-classes of @page for examples.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Basic support 2.0 -- 8.0 6.0 5.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 07:39, 17 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          percentage - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            percentage

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The <percentage> CSS data types represent a percentage value. Many CSS properties can take percentage values, often to define sizes in terms of parent objects. Percentages are formed by a <number> immediately followed by the percentage sign %. Like for all unit in CSS, there is no space between the '%' and the number.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Many length properties use percentages, such as width, margin and padding. Percentages can also be seen in font-size, where the size of the text is directly related to the size of its parent.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Note: only calculated values are inherited. So, even if a percentage value is used on the parent property, a real value, like a width in pixel for a <length> value, will be accessible on the inherited property, not the percentage value.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Interpolation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Values of the <percentage> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. [1] The speed of the interpolation is determined by the timing function associated with the animation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div style="background-color:#0000FF;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The above HTML will output:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Width: 50%, Left margin: 20%
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Width: 30%, Left margin: 60%

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div style="font-size:18px;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Full size text (18px)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <span style="font-size:50%;">50%</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <span style="font-size:200%;">200%</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The above HTML will output:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Full size text (18px) 50% 200%

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            CSS Values and Units Level 3 Working Draft No significant change from CSS Level 2 (Revision 1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            CSS Level 2 (Revision 1) Recommendation No change from CSS Level 1
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            CSS Level 1 Recommendation  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Browser Compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            basic 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Basic support yes yes yes yes yes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 19:28, 9 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ratio - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              ratio

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values. It is a strictly positive <integer> followed by a slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <integer> . There may be spaces before and after the solidus.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Ratio Usage
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Ratio4_3.png 4/3 Traditional TV format in the 20th century.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Ratio16_9.png 16/9 Modern, 'widescreen', TV format.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Ratio1_1.85.png 185/100 = 91/50
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              (non-integer dividends and divisors are not allowed)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              The most common movie format since the 1960s.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Ratio1_2.39.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              239/100
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              (non-integer dividends and divisors are not allowed)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              The 'widescreen', anamorphic, movie format.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Specification Status Comment

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              CSS Media Queries Level 3

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Candidate Recommandation  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Basic support <4 3.5 (1.9.1) 9 [1] 9.5 1.0 (?) [2]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Basic support yes yes ? yes yes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Tags (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • No tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 19:31, 1 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              :required - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                :required

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The :optional pseudo-class may be used to provide an appearance for optional form fields.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                See :invalid for an example.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Opera 9.5

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Safari | Chrome | WebKit

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                5 | 8 | 534.10

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 12:51, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                resolution - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  resolution

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  The <resolution> CSS data types, used in media queries, denotes the density of pixels of an output device, its resolution. It is a <number> immediately followed by a unit of resolution (dpi, dpcm, ...). Like for any CSS dimension, there is no space between the unit literal and the number.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Units

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  dpi
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit represents the number of dots per inch. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 2.54dpcm.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  dpcm
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 0.39dpi.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Here are some correct uses of <resolution> values:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  96dpi                                              Correct use: a <number> (here an <integer>) followed by the unit.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  @media print and (min-resolution: 300dpi) { ... }  Correct use in the context of a media query.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Here are some incorrect uses:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  72 dpi                                             Incorrect: no spaces allowed between the <number> and the unit.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ten dpi                                            Incorrect: only digits must be used
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Media Queries Level 3 Candidate Recommandation  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Basic support <4 3.5 (1.9.1) [*] 9 [1] 9.5 1.0 (?) [2]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Basic support yes yes ? yes yes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  [*] Before Firefox 8 (Gecko 8.0), it erroneously accepted only CSS Dimension with <integer> followed by the unit. From that version, it supports any valid CSS dimensions ( <number> immediately followed by the unit).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 20:32, 1 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  :right - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :right

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    The :right page pseudo-class matches any right page when printing a page. It allows to describe the styling of right-side page.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page and if it has a major writing direction of right-to-left then it will be a :left page.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Note: You can't change all CSS properties. You can only change the the margin, padding, border, and background properties of the page box. All other CSS properties will be ignored, and only the page box, not the document content on the page, will be affected.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    @page :right {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      margin: 2in 3in;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Internet Explorer
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    8.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Firefox (Gecko) ---
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Opera
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    9.2
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Safari (WebKit) ---

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 07:46, 25 Oct 2011 by berkerpeksag

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :root - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :root

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      1. 1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      2. 2. Specifications
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      3. 3. Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      The :root pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specifity is higher.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Basic support 1 1.0 (1.7) 9 9.5 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 10:35, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      shape - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        shape

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        The <shape> CSS data type denotes the specific form of a region. This region is used to define on which part of an element some properties like clip do apply.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        In the current specification, a <shape>, though designed to denote any kind of form, can only represents a rectangular region, defined using the rect() functional notation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        The rect() function

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        The rect() functional notation produces a region in the form of a rectangle.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        rect(top, right, bottom, left)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        where:rect.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        top
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Is a <length> representing the offset for the top of the rectangle relative to the top border of the element's box.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        right
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Is a <length> representing the offset for the right of the rectangle relative to the left border of the element's box.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        bottom
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Is a <length> representing the offset for the bottom of the rectangle relative to the top border of the element's box.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        left
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Is a <length> representing the offset for the left of the rectangle relative to the left border of the element's box.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Interpolation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Values of the <shape> CSS data type which are rectangles can be interpolated in order to allow animations. In that case they are interpolated over their top, right, bottom and left component, each treated as a real, floating-point, number. [1] The speed of the interpolation is determined by the timing function associated with the animation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         img.clip04 { 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           clip: rect(10px, 20px, 20px, 10px);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        CSS Level 2 (Revision 1) Recommendation Defined with the clip property

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Basic support 1.0 1.0 (1.7 or earlier) 5.5[*] 9.5 1.3
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        [*] From IE 5.5 to IE 7 included, the IE supported syntax of the rect() didn't allow the comma as the parameter separator, but a space. From IE 8, the standard syntax (only commas) is supported.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (1)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        FileSizeDateAttached by 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         rect.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Offset coord for rect()
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        329.53 kB14:15, 6 Oct 2011teoliActions

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 19:36, 9 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        string - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          string

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          The <string> CSS data type represents a string. It is formed by a Unicode characters delimited by either double (") or single (') quotes. A double quoted string cannot contain double quotes unless escaped using a backslash (\). The same practice applies for single quoted strings, they cannot contain single quotes unless escaped using a backslash (\). The backslash character must be escaped to be part of the string.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          New lines are not accepted unless escaped by using a line feed character such as \A or \00000a. However, strings can span over several lines. In that case, the new line must be escaped using a \ as the last character of the line.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Characters can be described using their Unicode code point in hexadecimal, when escaped using \. \27 represents the single quote (').

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* Simple quote escaping */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          "Awesome string with double quotes"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          "Awesome string with \" escaped double quotes"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          'Awesome string with single quotes'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          "Awesome string with \' escaped single quotes"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* New line in a string */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          "Awesome string with \Aline break"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* String spanning over two lines (these two strings are exactly the same) */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          "A really long \
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          awesome string"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          "A really long awesome string"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Note: Double quoted strings can also be escaped using \22 and single quoted strings can be escaped using \27.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          CSS Values and Units Level 3 Working Draft No significant change from CSS Level 2 (Revision 1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          CSS Level 2 (Revision 1) Recommendation Explicitly defined; allows 6-digit Unicode escaped characters
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          CSS Level 1 Recommendation Implicitly defined; allows 4-digit Unicode escaped characters

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser Compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          basic 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          \xx 1.0 1.0 (1.0) 6.0 [1] yes 1.0 (85)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Basic support yes yes yes yes yes
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          \xx yes yes yes yes yes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 18:39, 30 Sep 2011 by Sheppy

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          :target - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :target

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1.1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 1.2. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              3. 1.3. Note
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            1. 2. Browser compatibility
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 2.1. Specifications
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2.2. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 1.1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 1.2. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              3. 1.3. Note
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            1. 2. Browser compatibility
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              1. 2.1. Specifications
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              2. 2.2. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section2:
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              http://example.com/folder/document.html#section2
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The anchor can be any element with an id attribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the :target pseudo-class.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :target { outline: solid red }  /* draw a red, solid line around the target element */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            /* example code for userContent.css or any web pages;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               a red/yellow arrow indicates the target element */  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :target { 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                -moz-box-shadow:  0.2em 0.2em 0.3em #888;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             -webkit-box-shadow:  0.2em 0.2em 0.3em #888;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :target:before {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              font:           70% Arial,"Nimbus Sans L",sans-serif !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              content:        "\25ba";  /* ► */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              color:          red;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              background:     gold;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              border:         solid thin;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              padding-left:   1px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              display:        inline-block;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              margin-right:   0.13em;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              vertical-align: 20%;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Note

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The id attribute was new in HTML 4 (December 1997).  In old-style HTML <a name="foo"> is a target element.  The :target pseudo-class applies to those targets as well.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Basic support ? (1.3) 9 9.5 1.3
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Basic support ? ? ? ? ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 12:06, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            time - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              time

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              The <time> CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a <number> immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              The following units may be used :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • s which represents a time in seconds. E.g. 0s, 1.5s, -60s.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • ms which represents a time in milliseconds. E.g. 0ms, 1500ms, -60000ms.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Conversion between s and ms follows the logical 1s = 1000ms.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              As all units represents the same time for the value 0, the unit may be omitted in that case: 0 represents 0s, 0ms.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              These are valid time values:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              12s         Positive integer
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              -456ms      Negative integer
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              4.3ms       Non-integer
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              14mS        The unit is case-insensitive, though capital letters are not recommended for s and ms.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              0           Zero (without the unit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              +0s         Zero, with a leading + and the unit
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              -0ms        Zero, with a leading - and the unt(Though strange, this is an allowed value)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              These are invalid time values:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              12.0        This is a <number>, not an <time>, it must have a unit
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              7 ms        No space is allowed between the <number> and the unit
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              CSS Values and Units Level 3 Working Draft  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Feature Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera (Presto) Safari (Webkit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Basic support <=11 (?) 4.0 (2.0) 9.0 [1] 10.5 (2.3) [2] <=3.2 (?)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Basic support ? ? ? no ?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Page last modified 19:12, 30 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              timing-function - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                timing-function

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The <timing-function> CSS data type denotes a mathematical function that describes how fast one-dimensional values change during transitions or animations. This in essence lets you establish an acceleration curve, so that the speed of the animation can vary over its duration.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                It is a function linking the time with a ratio of the output value (expressed as a <number>, with 0.0 representing the initial state, 1.0 the final state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                TF_with_output_gt_than_1.pngTF_with_output_gt_than_1_clipped.pngThe output ratio can be greater than 1.0 (or smaller than 0.0). This causes the animation to go farther than the final state, then come back, in a kind of bouncing effect.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Nevertheless, if the output value goes outside of its possible range, such as a component of a color going greater than 255 or smaller than 0, the value is clipped to its closest allowed value (in the case of a color-component 255 and 0 respectively. Some cubic-bezier() curves exhibit this property.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Values

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                CSS supports two kinds of timing functions: the subset of the cubic Bézier curves that are functions and staircase functions. The most useful of these functions are given a keyword that allows to easily describe them.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The cubic-bezier() class of timing-functions

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier, example.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The cubic-bezier() functional notation defines a cubic Bézier curve. As these curves are continuous, they are often used to smooth down the start and end of the animation and are therefore sometimes called easing functions.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                A cubic Bézier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range). P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Not all cubic Bézier curves are suitable as timing functions as not all are mathematical functions, i.e. curves that for a given abscissa have zero or one value. With P0 and P3 fixed as defined by CSS, a cubic Bézier curve is a function, and is therefore valid, if and only if the abscissas of P1 and P2 are both in the [0, 1] range.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Cubic Bézier curves with the P1 or P2 ordinate outside the [0, 1] range may generate bouncing effects.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                When you specify an invalid cubic-bezier curve, CSS ignores the whole property.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(x1, y1, x2, y2)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                where :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                x1, y1, x2, y2
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Are <number> values representing the abscissas and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                These cubic Bézier curves are valid for use in CSS :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(0.1, 0.7, 1.0, 0.1)   The canonical Bézier curve with four <number> in the [0,1] range.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(0, 0, 1, 1)           Using <integer> is valid as any <integer> is also a <number>.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(-0.2, 0.6, -0.1, 0)   Negative values for abscissas are valid, leading to bouncing effects.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(1.1, 0, 4, 0)         Values > 1.0 for abscissas are also valid.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                These cubic Bézier curves definitions are invalid :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(0.1, 4,   0.6, 2.45)  Ordinates must be in the [0, 1] range or the curve is not a function of time.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(0.3, 2.1)             The two points must be defined, there is no default value.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier(0.3, -1.9, 2.1, -0.2) Ordinates must be in the [0, 1] range or the curve is not a function of time.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The steps() class of timing-functions


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(2,start).png steps(4,end).png The steps() functional notation defines a step function dividing the domain of output values in equidistant steps. This subclass of step functions are sometimes also called staircase functions.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(2, start) steps(4, end)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(number_of_steps, direction)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                where :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                number_of_steps
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Is a strictly positive <integer> representing the amount of equidistant treads composing the stepping function.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                direction
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Is a keyword indicating if it the function is left- or right-continuous:
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • start denotes a left-continuous function, so that the first step happens when the animation begins;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • end denotes a right-continuous function, so that the last step happens when the animation ends.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                These timing functions are valid :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(5, end)          There is 5 treads, the last one happens right before the end of the animation.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(2, start)        A two-step staircase, the first one happening at the start of the animation.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                These timing function are invalid :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(2.0, end)        The first parameter must be an <integer> and cannot be a real value, even if it is equal to one.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(-3, start)       The amount of steps must be non-negative.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(0, end)          There must be at least one step.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(2)               The second parameter is not optional.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(start, 3)        Though of different types, the order of parameter is important.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                step(1, end)           Even if there is one step, the function name is steps, with the plural 's'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(3 end)           The two parameters must be separated with a comma; one or several spaces is not enough.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Keywords for common timing-functions

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                linear

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier,linear.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                This keyword represents the timing function cubic-bezier(0.0, 0.0, 1.0, 1.0). Using this timing function, the animation goes from its initial state to its final one regularly, with a constant speed.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                ease

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier,ease.png This keyword represents the timing function cubic-bezier(0.25, 0.1, 0.25, 1.0). This function is similar to ease-in-out, though it accelerates more sharply at the beginning and the acceleration and already starts to slow down near the medium of it.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                ease-in

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier,ease-in.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                This keyword represents the timing function cubic-bezier(0.42, 0.0, 1.0, 1.0). The animation begins slowly, then progressively accelerates until the final state is reached and the animation stops abruptly.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                ease-in-out

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier,ease-in-out.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                This keyword represents the timing function cubic-bezier(0.42, 0.0, 0.58, 1.0). With this timing function, the animation starts slowly, accelerates than slows down when approaching to its final state. At the begin, it behaves similarly to the ease-in function, at the end, it is similar to the ease-out function.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                ease-out

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezer,ease-out.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                This keyword represents the timing function cubic-bezier(0.0, 0.0, 0.58, 1.0). The animation starts quickly then slow progressively down when approaching to its final state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                step-start


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(1,start).pngThis keyword represents the timing function steps(1, start). Using this timing function, the animation jumps immediately to the end state and stay in that position until the end of the animation.  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                step-end

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(1,end).png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                This keyword represents the timing function steps(1, end). Using this timing function, the animation stays in its initial state until the end, where it directly jumps to its final position.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                CSS Transitions Level 3 Working Draft Defined anonymously
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                CSS Animations Level 3 Working Draft Defined anonymously, says to see definition in the CSS Transitions Module

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Basic support 4.0 (2.0) (Supported) -- 10.5 [1] 3.1
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier() w/ ordinate ∉ [0,1] 4.0 (2.0) -- -- -- Nightly [2]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps() 4.0 (2.0) -- -- -- --
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Basic support 4.0 (2.0) (Supported) -- 10 [3] 2.0 [4]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier() w/ ordinate ∉ [0,1] 4.0 (2.0) -- -- -- --
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps() 4.0 (2.0) -- -- -- 5.0 [5]

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attachments (12)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                FileSizeDateAttached by 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezer,ease-out.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The ease-out timing-function
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                242.92 kB12:19, 8 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 cubic-bezier, example.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                An example of a valid cubic Bézier curve
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                281.83 kB06:25, 10 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier,ease-in-out.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The ease-in-out timing-function
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                238.06 kB11:00, 8 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier,ease-in.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The ease-in timing-function
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                242.92 kB12:08, 8 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 cubic-bezier,ease.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The ease timing-function
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                238.06 kB11:21, 8 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                cubic-bezier,linear.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The linear timing-function
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                242.92 kB10:16, 9 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(1,end).png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The step-end timing-function
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                241.95 kB12:20, 8 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                steps(1,start).png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                The step-start timing-function
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                241.95 kB10:18, 9 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 steps(2,start).png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                A stepping function with 2 steps
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                241.95 kB11:57, 10 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 steps(4,end).png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                A stepping function with 4 steps
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                241.95 kB11:57, 10 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 TF_with_output_gt_than_1.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                A timing function with output greater than 100%
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                242.92 kB09:22, 10 Oct 2011teoliActions
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 TF_with_output_gt_than_1_clipped.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                A timing function with output clipped to 100%
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                242.92 kB09:22, 10 Oct 2011teoliActions

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Page last modified 11:54, 31 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                uri - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  uri

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  The <url> CSS data type denotes a pointer to a resource. It has no proper syntax and can only be expressed through the url() functional notation.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  URI or URL?

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  There is a difference between a URI and a URL. A URL describes the location of the resource, the URI describes an id of the resource . A URI may be a location, a URL, or a name, a URN, of a resource.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  In CSS Level 1, the url() functional notation was introduced to describe... URL, i.e. locations (a <url> CSS data type, though it wasn't explicitly defined that way).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  In CSS Level 2, the same functional notation was extended to describe any URI, being a URL or URN. This led to the confusing fact that url() was used to create a <uri> CSS data type. Not only was this confusing, but URN are almost never used in the CSS usual case.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  To fix this, CSS Level 3 came back to the initial definition, this time explicitly defined. The functional notation url() denotes a <url> CSS data type and no more the more generic <uri> CSS data type.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Remark that these semantic details doesn't change much for a web author, or the implementation details of the data type.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Many CSS properties take a URL as value, such as background-image, cursor, @font-face, list-style etc.  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  The url() functional notation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  The URI may be quoted by simple quotes or double quotes.  Relative URIs are allowed and are relative to the URL of stylesheet (and not to the URL of the web page).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   <a_css_property>:  url("http://mysite.example.com/mycursor.png")
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   <a_css_property>:  url(http://mysite.example.com/mycursor.png)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  .topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ul { list-style: square url(http://www.example.com/redball.png) }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Specification Status Comment
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Values and Units Level 3 Working Draft No significant change from CSS Level 2 (Revision 1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Level 2 (Revision 1) Recommendation No significant change fromm CSS Level 1
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  CSS Level 1 Recommendation  

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Desktop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Mobile

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Basic support 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Basic support 1.0 1.0 (3.5) yes yes 1.0

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Page last modified 20:36, 1 Oct 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  :valid - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :valid

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    The :valid CSS pseudo-class represents any <input> element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    See :invalid for an example.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Browser Lowest version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Internet Explorer ---
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Firefox (Gecko) 4.0 (2.0)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Opera 9.5

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Safari | Chrome | WebKit

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    5 | 8 | 534.10

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Tags (5)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Page last modified 12:55, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    :visited - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      :visited

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      The :visited pseudo-class lets you select only links that have been visited.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Gecko 2.0 note
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Starting in Firefox 4, major limitations to the styles you can apply using this selector have been introduced. For more information on the limitations and the motivation for them, see Privacy and the :visited selector. The same limitations have been adopted by other browsers, including Safari 5/4.1 and Chrome 6.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      a:visited { color: #4b2f89; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      a:visited { background-color: white } 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Internet Explorer 3.5
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Firefox 1.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Opera 3.5
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Safari 1.0

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Tags (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Page last modified 10:42, 21 Sep 2011 by teoli

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ::-moz-progress-bar - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ::-moz-progress-bar

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Table of contents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          1. 1.1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          2. 1.2. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        1. 2. See also
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Table of contents
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          1. 1.1. Summary
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          2. 1.2. Examples
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        1. 2. See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        « CSS « CSS Reference « CSS Reference:Mozilla Extensions

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        The ::-moz-progress-bar pseudo-element applies to the area of an HTML  <progress> element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        You have pretty broad capabilities to style the bar. This can be especially useful with indeterminate bars (via the :indeterminate pseudo-class), where you may wish to substantially change the default appearance; you can change the width and positioning of the bar, for example. (By which we probably mean the whole element's dimensions and position, not just the painted part of the element, as featured in the screen shot below.)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        This example styles the progress meter portion of the progress bar with ID redbar with the color red.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        #redbar::-moz-progress-bar {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          background-color: red;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        A bar using this style might look something like this:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        redbar.png

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attachments (1)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        FileSizeDateAttached by 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         redbar.png
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        No description
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        2.96 kB20:51, 16 Jun 2011SheppyActions

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Page last modified 12:21, 18 Aug 2011 by Sheppy

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ::-moz-selection | ::selection - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ::-moz-selection | ::selection

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          « CSS « CSS Reference « CSS Reference:Mozilla Extensions

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          The ::-moz-selection (::selection) pseudo-element applies to the portion of a document that has been highlighted (e.g. selected with the mouse) by the user.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* draw any selected text yellow on red background */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ::-moz-selection { color: gold;  background: red; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ::selection      { color: gold;  background: red; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* draw selected text in a paragraph white on black */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          p::-moz-selection { color: white;  background: black; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          p::selection      { color: white;  background: black; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Gecko/Firefox supports ::-moz-selection, use also ::selection for some other browsers.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          The following properties apply to ::-moz-selection :
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          color, background and background-color (background-image is ignored).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Specifications

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ::selection was drafted for CSS3 Selectors but removed from the current CSS3 draft. Anyhow, it's implemented in browsers and support will continue.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Requires two different rules with identical declarations as stated in the examples above.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Browser Lowest Version Support of
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Internet Explorer 9 ::selection
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Firefox (Gecko) 1.0 (1.5) ::-moz-selection
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Opera 9.5 ::selection
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Safari (WebKit) 1.1 (100) ::selection

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Tags (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Page last modified 10:33, 14 May 2010 by rubena

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          z-index - MDN

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            z-index

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            « CSS « CSS Reference

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Summary

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            For a positioned box, the z-index property specifies:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            1. The stack level of the box in the current stacking context.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            2. Whether the box establishes a local stacking context.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Syntax

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            z-index:  auto | <integer> | inherit

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Values

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            auto
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <integer>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is 0. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Examples

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            position:relative; z-index:1; position:absolute; z-index:3;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            left:20em; top:-25px; opacity:0.9
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            position:absolute; z-index:2; left:60px; top:3em;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Notes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Negative z-index values are supported correctly starting in Gecko 1.9 / Firefox 3. Previous versions implemented the CSS 2 behavior, not the CSS 2.1 behavior that is compatible with other browsers.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Browser compatibility

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Browser Lowest Version
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Internet Explorer 4.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Firefox (Gecko) 1.0 (1.0)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Opera 4.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Safari (WebKit) 1.0 (85)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            See also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Tags (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Edit tags

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attachments (0)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Attach file

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Page last modified 14:04, 16 Oct 2011 by teoli